如何覆盖Material-UI Switch组件样式 禁用时移除thumb滑块盒阴影

适配现有全局主题配置的修改方案 #

你当前使用的是全局主题覆盖MuiSwitch样式的写法，无需移动原有thumb的boxShadow配置，只需在switchBase规则中新增disabled状态与thumb的关联选择器即可，原理是switchBase作为父元素，匹配到disabled状态时会命中后代thumb的覆盖样式。

修改后的完整配置如下：

MuiSwitch: {
  switchBase: {
    // thumb when unchecked
    color: "#F1F1F1",
    opacity: 1,
    // 新增：任意状态下组件禁用时，移除thumb阴影
    "&$disabled": {
      "& $thumb": {
        boxShadow: "none"
      }
    },
    "&$checked": {
      // thumb when checked
      color: MAIN,
      opacity: 1,
      // track when checked
      "& + $track": {
        backgroundColor: "#DDDDFA",
        opacity: 0.3,
      },
      "&$disabled": {
        color: "#BDBDBD",
        opacity: 0.8,
        "&$checked": {
          // thumb when checked and disabled
          color: MAIN,
          opacity: 0.6,
          // track when checked and disabled
          "& + $track": {
            backgroundColor: "#DDDDFA",
            opacity: 0.7,
          },
        },
      },
    },
  },
  thumb: {
    boxShadow:
      "0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24)"
  },
  checked: {},
  track: { backgroundColor: "#000", opacity: 0.24 },
  disabled: {},
},

三元表达式动态配置的使用说明 #

你提到的三元表达式写法可以在组件内的动态样式场景使用，不适用于全局主题的静态配置对象：

1. 如果你使用组件sx属性自定义样式，写法如下：

<Switch
  disabled={yourDisabledFlag}
  sx={{
    '.MuiSwitch-thumb': {
      boxShadow: yourDisabledFlag ? 'none' : "0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.24)"
    }
  }}
/>

2. 如果你使用styled高阶组件封装，也可以直接读取组件props做三元判断返回对应样式。

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