【问题标题】：Change style in JSS更改 JSS 中的样式
【发布时间】：2018-10-09 20:56:44
【问题描述】：

我有以下使用 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>
        );
    }
}

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

【问题讨论】：

react change class name on state change的可能重复

标签： reactjs jss

【解决方案1】：

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 属性。

【讨论】：

它不回答这个问题。这是 JSS api 中不允许的东西吗？
假设他省略了使用 injectSheet 注入样式对象的代码部分，当他尝试更改样式时，injectSheet 已经将样式注入页面（通过注入字符串类名到this.props.classes里面的className，指的是注入到header中的样式）。当您尝试更改样式对象时，它不是反应式的。我相信这回答了这个问题，因为它说明了做事的正确方法，但我稍后会澄清我的答案。
我使用函数值添加了一个答案，可以让您更改样式的属性

【解决方案2】：

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

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

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

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

请注意，截至 2018 年 8 月，有 limitations 可以使用函数值

【讨论】：

【解决方案3】：

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

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

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>
        );
    }
}

【讨论】：