如何设置MUI ToggleButton组件选中状态的background-color

• 你当前的<ToggleButton>没有配置独立的value属性，ToggleButtonGroup无法正确识别哪个按钮处于选中状态
• 你绑定的title状态没有设置初始值，所以默认不会选中任何按钮
• Material UI自带的组件样式优先级高，需要通过正确的样式注入方式覆盖选中态背景色

首先补充state初始值和事件处理逻辑（类组件示例）：

constructor(props) {
  super(props);
  this.state = {
    title: 'btn1' // 初始值对应Btn 1的value，实现默认选中第一个按钮
  }
  this.handleChange = this.handleChange.bind(this);
}

handleChange(e, newVal) {
  // exclusive模式下默认点击已选中按钮会返回null，加判断可强制保留选中态，不需要可删除
  if (newVal !== null) {
    this.setState({
      title: newVal
    })
  }
}

然后修改JSX代码：

<Grid container direction='column'>
  <ToggleButtonGroup
    value={this.state.title}
    exclusive
    size='small'
    onChange={this.handleChange}
    sx={{
      // 覆盖选中态样式，也可通过className、styled组件实现
      '& .MuiToggleButton-root.Mui-selected': {
        backgroundColor: '#1976d2', // 替换为你需要的选中背景色
        color: '#fff', // 匹配背景色调整选中态文字颜色，避免撞色
        '&:hover': {
          backgroundColor: '#1565c0' // 可选：配置选中态hover时的背景色
        }
      }
    }}
  >
    <ToggleButton value='btn1'>
      Btn 1
    </ToggleButton>
    <ToggleButton value='btn2'>
      Btn 2
    </ToggleButton>
    <ToggleButton value='btn3'>
      Btn 3
    </ToggleButton>
  </ToggleButtonGroup>
</Grid>

• 如果使用的是MUI v4版本，把sx属性替换为makeStyles生成的自定义类名即可，选中态的类名规则仍然是Mui-selected，核心逻辑一致
• 背景色可以直接替换为你项目的主题色变量，不需要写死固定色值

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