使用 sx 属性检查状态的 Mui 风格开关组件

Question

由于我编辑 Mui switch 组件已经很长时间了，所以我想到了以下嵌套样式的排列，用于根据状态的变化设置新样式：

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

不过，这样的设置对于整体设计并没有什么影响。有什么想法可以让它发挥作用吗？

Answer 1

显然，状态样式必须设置为外部层，然后将组件槽样式设置为子层

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