如何在JSS中动态修改React组件样式？附问题代码

嘿，我明白你遇到的问题了——直接修改静态的styles对象确实没用，因为JSS在组件初始化的时候就已经把这些样式编译成对应的CSS类了，之后再改这个对象根本不会触发样式更新或者组件重新渲染。

下面给你两种常用的正确实现方式，都能搞定点击按钮切换背景色的需求：

方法1：通过状态切换CSS类 #

这种方式适合当你有好几组不同样式需要切换的场景，思路是用React的state控制是否添加额外的样式类：

import React, { Component } from 'react'
import injectSheet from 'react-jss'

// 定义两组按钮样式
const styles = {
  button: {
    backgroundColor: 'pink',
    padding: '8px 16px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
    transition: 'background-color 0.3s ease' // 加个过渡动画更流畅
  },
  buttonBlue: {
    backgroundColor: 'blue',
    color: 'white' // 顺便改个文字颜色，对比更明显
  }
}

class App extends Component {
  // 初始化状态，控制是否切换到蓝色样式
  state = {
    isBlue: false
  }

  changeStyle = () => {
    // 点击时切换状态
    this.setState(prevState => ({ isBlue: !prevState.isBlue }))
  }

  render() {
    const { classes } = this.props
    const { isBlue } = this.state

    return (
      <div className="App">
        {/* 根据状态组合不同的类名 */}
        <button 
          className={`${classes.button} ${isBlue ? classes.buttonBlue : ''}`} 
          onClick={this.changeStyle}
        >
          Switch user
        </button>
      </div>
    );
  }
}

export default injectSheet(styles)(App)

这个方法的核心是：JSS会把所有定义的样式都注入到页面中，我们只需要通过state控制DOM元素应用哪个类就行，状态变化时React会自动重新渲染，从而更新样式。

方法2：使用JSS的动态样式函数 #

如果你的样式只是有少量动态变化（比如只有背景色），可以直接把JSS的样式定义写成函数，接收组件props作为参数，然后通过传递状态来动态计算样式：

import React, { Component } from 'react'
import injectSheet from 'react-jss'

// 把styles写成函数，接收props参数
const styles = {
  button: {
    padding: '8px 16px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
    transition: 'background-color 0.3s ease',
    // 根据props里的isBlue值动态设置背景色
    backgroundColor: props => props.isBlue ? 'blue' : 'pink',
    color: props => props.isBlue ? 'white' : 'inherit'
  }
}

// 先封装一个带样式的按钮组件
const StyledButton = injectSheet(styles)(({ isBlue, classes, onClick }) => (
  <button className={classes.button} onClick={onClick}>
    Switch user
  </button>
))

class App extends Component {
  state = {
    isBlue: false
  }

  changeStyle = () => {
    this.setState(prevState => ({ isBlue: !prevState.isBlue }))
  }

  render() {
    // 把状态作为props传递给StyledButton
    return (
      <div className="App">
        <StyledButton isBlue={this.state.isBlue} onClick={this.changeStyle} />
      </div>
    );
  }
}

export default App

这种方式更简洁，JSS会根据传递的props自动更新样式，不需要手动管理多个类名。

总结一下，核心思路就是用React的state来驱动样式变化，因为直接修改静态的styles对象不会触发任何React的更新机制，而state变化会触发组件重新渲染，从而让JSS的样式生效。

内容的提问来源于stack exchange，提问作者Svetoslav Dimitrov