Reactjs JSS中的变更样式

我有以下使用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”导入React
从“react jss”导入injectSheet
常量样式={
按钮：{
背景颜色：“粉色”，
}
}
类应用程序扩展组件{
changeStyle=（）=>{
styles.button.backgroundColor:'蓝色'//这显然不起作用
}
render（）{
返回(
交换机用户
);
}
}

---

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

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

您的问题的一个解决方案如下：

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

从“React”导入React
从“react jss”导入injectSheet
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={buttonColor:'pink'}；
}
changeStyle=（颜色）=>{
这是我的国家({
按钮颜色：颜色
});
}
render（）{
返回(
交换机用户
);
}
}

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

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

类名包 您可以使用一个简单的库来有条件地应用样式，这是我在下面概述的方式

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

从“React”导入React；
从“react jss”导入表单；
常量样式={
按钮链接：{
背景颜色：“粉色”，
},
按钮蓝色：{
背景颜色：“蓝色”，
},
};
类应用程序扩展组件{
状态={
是的，
};
changeButtonColor=（）=>{
}
render（）{
const{buttonColorPink}=this.state；
const{classes}=this.props；
返回(
交换机用户
);
}
}
导出默认图纸（样式）（应用程序）；

---

或者，您可以对任何动态样式使用内联样式，比如按钮内部的

style={{{backgroundColor:this.state.buttonColor}}

，只需在类方法内部使用thisState更改buttonColor属性。

对于JSS 7.1.7+版，您可以使用函数值定义样式

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

当您需要更改颜色时，请调用

工作表的
更新
方法
道具：

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

请注意，截至2018年8月，使用函数值的可能性不存在
可能重复的问题。这是JSS api中不允许的吗？假设他遗漏了用injectSheet注入styles对象的代码部分，当他试图更改样式时，injectSheet可能已经将样式注入到页面中了（通过向this.props.classes内的className注入字符串类名，该类是指注入头中的样式）。当您尝试更改样式对象时，它不是被动的。我相信这回答了这个问题，因为它说明了一种正确的操作方式，但我稍后将澄清我的答案。我添加了一个使用函数值的答案，该值允许您更改样式的属性