如何在选中时覆盖 Material UI 开关组件的样式？

我想控制开关组件的颜色，无论是在选中还是未选中时。默认情况下它是红色的。我希望当开关状态为“球形旋钮”时为黄色checked: true我希望它是灰色的，什么时候checked: false

I must通过使用来实现样式createMuiTheme and ThemeProvider由于项目的性质，我无法直接在组件上使用类。

我尝试在这里遵循他们定制的紫色旋钮的样式示例：https://codesandbox.io/s/x8bz8来源：https://material-ui.com/components/switches/

不幸的是，我无法弄清楚如何在检查时控制球的颜色（它总是回落到默认的红色）。我已经成功设置了选中和未选中时轨道的颜色，并且我还能够在未选中时设置球的颜色。有人可以帮我弄清楚如何在检查球时将颜色样式应用到球上吗？

我做了一个 CodeSandbox，我一直在其中乱搞：https://codesandbox.io/s/material-demo-b6153

 const theme = createMuiTheme({
    overrides: {
      MuiSwitch: {
        switchBase: {
          color: "#ccc", // this is working
          "&$checked": { // this is not working
            color: "#f2ff00"
          }
        },
        track: { // this is working
          opacity: 0.2,
          backgroundColor: "#fff",
          "$checked$checked + &": {
            opacity: 0.7,
            backgroundColor: "#fff"
          }
        }
      }
    }
  });

  return (
    <ThemeProvider theme={theme}>
      <FormGroup>
        <FormControlLabel
          control={
            <Switch
              checked={state.checkedA}
              onChange={handleChange}
              name="checkedA"
            />
          }
          label="Custom color"
        />
      </FormGroup>
    </ThemeProvider>
  );

我也尝试过这个：

checked: {
  "& + $bar": {
    opacity: 1.0,
    backgroundColor: "rgb(129, 171, 134)" // Light green, aka #74d77f
  }
},

在这个回答中提出了一个有点类似的问题：选中时如何正确使用 MUISwitch“栏”颜色的主题覆盖？但这似乎不起作用，无论出于何种原因，可能是 MUI 版本的差异，或者因为在内部创建时样式不同createMuiTheme.

Switch 默认使用辅助颜色.

然后将拇指的颜色控制在colorSecondaryCSS。这里有默认样式对于该类：

  /* Styles applied to the internal SwitchBase component's root element if `color="secondary"`. */
  colorSecondary: {
    '&$checked': {
      color: theme.palette.secondary.main,
      '&:hover': {
        backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
        '@media (hover: none)': {
          backgroundColor: 'transparent',
        },
      },
    },
    '&$disabled': {
      color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
    },
    '&$checked + $track': {
      backgroundColor: theme.palette.secondary.main,
    },
    '&$disabled + $track': {
      backgroundColor:
        theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
    },
  },

您可以使用以下内容调整主题中选中的颜色（显示覆盖拇指和轨道）：

  const theme = createMuiTheme({
    overrides: {
      MuiSwitch: {
        switchBase: {
          // Controls default (unchecked) color for the thumb
          color: "#ccc"
        },
        colorSecondary: {
          "&$checked": {
            // Controls checked color for the thumb
            color: "#f2ff00"
          }
        },
        track: {
          // Controls default (unchecked) color for the track
          opacity: 0.2,
          backgroundColor: "#fff",
          "$checked$checked + &": {
            // Controls checked color for the track
            opacity: 0.7,
            backgroundColor: "#fff"
          }
        }
      }
    }
  });

对于 MUI v5

对于 v5，传递给的对象的结构createTheme改变了。另一个变化是primary现在是默认颜色而不是secondary， 所以colorPrimary样式需要被覆盖而不是colorSecondary.

这是 v5 的等效代码：

import React from "react";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import { createTheme, ThemeProvider } from "@mui/material/styles";

export default function CustomizedSwitches() {
  const [state, setState] = React.useState({
    checkedA: true
  });

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setState({ ...state, [event.target.name]: event.target.checked });
  };

  const theme = createTheme({
    components: {
      MuiSwitch: {
        styleOverrides: {
          switchBase: {
            // Controls default (unchecked) color for the thumb
            color: "#ccc"
          },
          colorPrimary: {
            "&.Mui-checked": {
              // Controls checked color for the thumb
              color: "#f2ff00"
            }
          },
          track: {
            // Controls default (unchecked) color for the track
            opacity: 0.2,
            backgroundColor: "#fff",
            ".Mui-checked.Mui-checked + &": {
              // Controls checked color for the track
              opacity: 0.7,
              backgroundColor: "#fff"
            }
          }
        }
      }
    }
  });

  return (
    <ThemeProvider theme={theme}>
      <FormGroup>
        <FormControlLabel
          control={
            <Switch
              checked={state.checkedA}
              onChange={handleChange}
              name="checkedA"
            />
          }
          label="Custom color"
        />
      </FormGroup>
    </ThemeProvider>
  );
}