MUI Switch组件选中状态下轨道颜色不生效问题求助

问题出在选中状态的样式选择器写法错误，你用了后代选择器& .Mui-checked，但.Mui-checked是直接附加在Switch根元素上的类，应该使用组合选择器&.Mui-checked（去掉空格）才能正确命中选中状态的组件。

修正后的代码如下：

import Switch from '@mui/material/Switch';

<Switch
  sx={{
    // 未选中状态的滑块颜色
    ".MuiSwitch-thumb": {
      backgroundColor: "#FF9528"
    },
    // 未选中状态的轨道颜色
    ".MuiSwitch-track": {
      backgroundColor: "#FF4823"
    },
    // 选中状态（正确的选择器写法）
    "&.Mui-checked": {
      ".MuiSwitch-thumb": {
        backgroundColor: "#FF4823"
      },
      ".MuiSwitch-track": {
        backgroundColor: "#FF4823"
      }
    }
  }}
/>

如果需要更稳定的样式覆盖，也可以用MUI的styled API创建自定义Switch组件：

import { styled } from '@mui/material/styles';
import Switch from '@mui/material/Switch';

const CustomSwitch = styled(Switch)(({ theme }) => ({
  '& .MuiSwitch-thumb': {
    backgroundColor: '#FF9528',
  },
  '& .MuiSwitch-track': {
    backgroundColor: '#FF4823',
  },
  '&.Mui-checked .MuiSwitch-thumb': {
    backgroundColor: '#FF4823',
  },
  '&.Mui-checked .MuiSwitch-track': {
    backgroundColor: '#FF4823',
  },
}));

// 使用自定义组件
<CustomSwitch />

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