3

我有以下使用 JSS 的组件：

import React from 'react'
import injectSheet from 'react-jss'

const styles = {
  button: {
    backgroundColor: 'pink',
  }
}

class App extends Component {
    changeStyle = () => {
         styles.button.backgroundColor: 'blue' //this obviously doesn't work
    }
    render() {
        return (
            <div className="App">
                <button className={this.props.classes.button} onClick={this.changeStyle}>Switch user</button>
            </div>
        );
    }
}

这绝对是一个简单的问题。当我单击按钮时，我希望背景会变为“蓝色”，但仅分配新颜色是行不通的。

4

3 回答 3

3

JSS 中的条件样式

在 JSS 中，您应该使用一个函数将样式名称（作为字符串）注入到组件中。我假设您正在使用 injectSheet 将类注入道具，而只是将其从代码示例中删除。injectSheet 将注入包含键值对的类对象，如下所示：[styleObjectPropertyName]: [dynamicInjectedCSSPropertyName]，并将 CSS 注入页面的标题。

当您在发生这种情况后尝试编辑样式对象时，它不是响应式的，因此您需要事先准备好 CSS 样式并在代码中动态删除或应用它们。

类名包

您可以使用像classNames这样的简单库来有条件地应用样式，这就是我在下面概述的方式。

import React from 'react';
import injectSheet from 'react-jss';

const styles = {
  buttonPink: {
    backgroundColor: 'pink',
  },
  buttonBlue: {
    backgroundColor: 'blue',
  },
};

class App extends Component {
  state = {
    isButtonColorPink: true,
  };

  changeButtonColor = () => {

  }

  render() {
    const { buttonColorPink } = this.state;
    const { classes } = this.props;
    return (
      <div className="App">
        <button className={classNames({ 
          [classes.buttonPink]: isButtonColorPink,
          [classes.buttonBlue]: !isButtonColorPink,
        })} onClick={this.toggleStyle}>Switch user</button>
      </div>
    );
  }
}

export default injectSheet(styles)(App);

或者，您可以将内联样式用于任何动态样式 - 例如style={{ backgroundColor: this.state.buttonColor }}在按钮内部，并在类方法中使用 thisState 更改 buttonColor 属性。

于 2018-04-29T17:01:36.423 回答
0

使用 JSS 7.1.7+ 版本，您可以使用函数值来定义样式。

const styles = {
  button: {
    color: data => data.color
  }
}

当需要改变颜色时，调用prop的update方法：sheet

this.props.sheet.update({
  button: {
    color: 'red',
  }
})

请注意，截至 2018 年 8 月，使用函数值存在限制

于 2018-08-29T18:43:53.290 回答
-1

理想的模式是将按钮的颜色存储在状态对象中，然后在您想要更改颜色时更新该状态。

您的问题的一种解决方案是这样的：

import React from 'react'
import injectSheet from 'react-jss'


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {buttonColor: 'pink'};

  }
    changeStyle = (color) => {
      this.setState({
        buttonColor: color
      });
    }

    render() {
        return (
            <div className="App">
                <button className={this.props.classes.button} onClick={ this.changeStyle }>Switch user</button>
            </div>
        );
    }
}
于 2018-04-29T17:01:02.797 回答