如何设置 mui 切换轨道拇指选中和未选中的样式？

Question

我正在尝试将我的开关设计为具有某种颜色，然后禁用，并且在启用时具有某种颜色，我当前的代码如下所示，我想使用 makeStyles，这里的问题是轨道只有在禁用时才会获得橙色。

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
  // style class
  switch: { 
      "& .MuiSwitch-thumb": {
        backgroundColor: "orange",
      },
      "& .MuiSwitch-track": {
        backgroundColor: "orange",
      },
    },
  }))
  
  
 <Switch /*color="primary"*/ className={classes.switch} disabled={!oneRepMax} size="small" checked={check} onChange={handleSwitch} />

Answer 1

您可以借助 来覆盖选中和未选中开关的颜色createTheme。我们需要覆盖四种样式 -拇指（选中和未选中）和轨道（选中和未选中）-

  const theme = createTheme({
    components: {
      MuiSwitch: {
        styleOverrides: {
          switchBase: {
            //thumb - unchecked
            color: "orange"
          },
          colorPrimary: {
            "&.Mui-checked": {
              // thumb - checked
              color: "red"
            }
          },
          track: {
            // track - unchecked
            opacity: 0.2,
            backgroundColor: "blue",
            ".Mui-checked.Mui-checked + &": {
              // track - checked
              opacity: 0.9,
              backgroundColor: "pink"
            }
          }
        }
      }
    }
  });