MUI Switch组件使用sx属性设置选中状态样式无效的解决咨询

你的样式配置无效是因为CSS选择器的层级顺序错误。在MUI的Switch组件中，.Mui-checked类是添加在组件根元素上的，而非.MuiSwitch-thumb或.MuiSwitch-track的子元素内部，所以原写法无法命中目标元素。

正确的内联样式（sx）写法 #

调整选择器嵌套顺序，将.Mui-checked与组件根元素绑定后，再选中内部的滑块和轨道：

sx={{
  '&.Mui-checked .MuiSwitch-thumb': {
    color: '#4a3e98',
  },
  '&.Mui-checked .MuiSwitch-track': {
    backgroundColor: '#4a3e98',
  },
}}

可选：使用styled组件自定义样式 #

如果需要复用自定义样式，推荐用MUI的styled工具创建封装好的Switch组件：

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

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

// 使用示例：<CustomSwitch checked={yourState} onChange={handleChange} />

验证方法 #

可以通过浏览器开发者工具查看Switch的DOM结构：选中状态下，根节点会带有.Mui-checked类，.MuiSwitch-thumb和.MuiSwitch-track是它的子元素，确认选择器层级后就能确保样式生效。

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