JSS中的条件样式

Question

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

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

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

Answer 2

JSS中的条件样式

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

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

classNames包

您可以使用像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属性。

Answer 3

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

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

当您需要更改颜色时，请调用update道具的sheet方法：

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

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

改变JSS中的风格

3 个答案:

JSS中的条件样式

classNames包