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

Question

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

我必须通过使用来实现样式，createMuiTheme并且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 "bar" 颜色的主题覆盖？但这似乎并没有因为任何原因而起作用，可能是 MUI 版本的差异，或者因为在createMuiTheme.

Answer 1

切换默认为使用次要颜色。

然后在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"
          }
        }
      }
    }
  });

Answer 2

try this

const useStyles = makeStyles((theme) => ({  
    switch_track: {
        backgroundColor: "#f50057",
    },
    switch_base: {
        color: "#f50057",
        "&.Mui-disabled": {
            color: "#e886a9"
        },
        "&.Mui-checked": {
            color: "#95cc97"
        },
        "&.Mui-checked + .MuiSwitch-track": {
            backgroundColor: "#4CAF50",
        }
    },
    switch_primary: {
        "&.Mui-checked": {
            color: "#4CAF50",
        },
        "&.Mui-checked + .MuiSwitch-track": {
            backgroundColor: "#4CAF50",
        },
    },
}));

<Switch
  classes={{
    track: classes.switch_track,
    switchBase: classes.switch_base,
    colorPrimary: classes.switch_primary,
  }}
  color={!disabled ? "primary" : "default"}
  checked={value}
  onChange={handleChange}
  name="<your_name>"
  disabled={disabled}
/>