如何在Material UI中扩展makeStyles生成的样式类？

你原本的extend: 'button'写法不符合JSS（makeStyles底层依赖的样式方案）的继承规则，以下三种实现方式都可以达成「selectedButton继承button全部样式、仅修改背景色为黄色」的需求：

• 方案1：抽离公共样式变量（最稳妥，无特殊语法依赖）
  先把基础按钮样式定义为局部变量，再分别扩展不同状态的样式，示例代码如下：

const useStyles = makeStyles((theme) => {
  // 基础按钮公共样式
  const baseButtonStyles = {
    backgroundColor: 'red',
    border: 'black solid 5px',
  }
  return {
    button: baseButtonStyles,
    selectedButton: {
      ...baseButtonStyles,
      backgroundColor: 'yellow'
    }
  }
})

• 方案2：使用JSS原生extend语法
  仅需要修改你原有代码中的extend引用规则，加$标识引用同一样式表内的其他规则即可生效：

const useStyles = makeStyles((theme) => ({
  button: {
    backgroundColor: 'red',
    border: 'black solid 5px',
  },
  selectedButton: {
    extend: '$button', // 用$标识引用同样式表内的button规则
    backgroundColor: 'yellow'
  }
}))

• 方案3：组件内组合类名（适合动态切换选中状态的场景）
  不需要在样式定义阶段做继承，在组件渲染时同时挂载基础类和选中类，利用CSS优先级覆盖属性即可，示例代码如下：
  样式定义：

const useStyles = makeStyles((theme) => ({
  button: {
    backgroundColor: 'red',
    border: 'black solid 5px',
  },
  selectedButton: {
    backgroundColor: 'yellow'
  }
}))

组件调用：

function MyButton() {
  const [selected, setSelected] = useState(false)
  const classes = useStyles()
  return (
    <button 
      className={`${classes.button} ${selected ? classes.selectedButton : ''}`}
      onClick={() => setSelected(!selected)}
    >
      点击切换状态
    </button>
  )
}

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