React/Material-UI中ToggleButton组件className属性不生效如何解决

• 版本混用冲突：你当前导入的ToggleButton属于MUI v5（包名@mui/material），但样式方案用的是MUI v4的makeStyles（包名@material-ui/core），v4的样式生成规则优先级低于v5组件内置的样式，自定义样式会被默认样式覆盖，所以不生效。
• 样式权重不足：ToggleButton自带默认、选中、hover等多状态内置样式，普通自定义类的权重不足以覆盖内置样式。

另外你的代码存在语法小问题：组件定义const DashboardSettings = () = {缺少箭头函数的右尖括号，需要改成const DashboardSettings = () => {否则会直接报错。

方案1：改用MUI v5官方推荐的styled API（最适配） #

替换原来的makeStyles写法，适配v5组件的样式优先级，同时可以自定义不同状态的样式：

// styles.js修改后代码
import { styled } from '@mui/material/styles';
import ToggleButton from '@mui/material/ToggleButton';
import Paper from '@mui/material/Paper';

export const StyledPaper = styled(Paper)(({ theme }) => ({
  marginTop: theme.spacing(3),
  marginBottom: theme.spacing(3),
  padding: theme.spacing(20),
  [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: {
    marginTop: theme.spacing(6),
    marginBottom: theme.spacing(6),
    padding: theme.spacing(3),
  },
}));

export const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
  marginRight: "5px", 
  marginLeft: "5px", 
  color: "#000000",
  backgroundColor: "#FFFFFF",
  // 自定义选中状态样式
  '&.Mui-selected': {
    backgroundColor: "#FCDC00"
  }
}));

组件中直接使用封装后的组件即可，不需要单独加className：

<StyledPaper elevation={10}>
  {/* 其他内容省略 */}
  <ToggleButtonGroup
    onChange={() => {}}
    aria-label="text formatting"
    mt={10}
  >
    <StyledToggleButton value="mon">
      <p>Monday</p>
    </StyledToggleButton>
    <StyledToggleButton value="tue">
      <p>Tuesday</p>
    </StyledToggleButton>
    {/* 剩余按钮统一用StyledToggleButton即可，不需要额外加样式属性 */}
  </ToggleButtonGroup>
</StyledPaper>

方案2：通过ToggleButtonGroup批量统一样式（最简洁） #

不用单独修改每个按钮，直接在父组件ToggleButtonGroup上用sx属性批量设置子按钮样式，代码量最少：

<ToggleButtonGroup
  onChange={() => {}}
  aria-label="text formatting"
  sx={{
    mt: 10,
    // 批量设置所有子ToggleButton的样式
    '& .MuiToggleButton-root': {
      marginX: '5px',
      color: '#000',
      backgroundColor: '#fff',
      '&.Mui-selected': {
        backgroundColor: '#FCDC00'
      }
    }
  }}
>
  {/* 这里所有ToggleButton都不用加style或者className，自动继承样式 */}
  <ToggleButton value="mon">
    <p>Monday</p>
  </ToggleButton>
  <ToggleButton value="tue">
    <p>Tuesday</p>
  </ToggleButton>
  {/* 剩下的按钮都不需要加额外样式属性 */}
</ToggleButtonGroup>

临时解决方案：提升自定义样式优先级 #

如果不想改现有写法，可在makeStyles的样式属性后加!important强制覆盖，但不推荐长期使用：

toggleButton: {
  marginRight: "5px !important", 
  marginLeft: "5px !important", 
  color: "#000000 !important",
  backgroundColor: "#FFFFFF !important"
}

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