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

Posted 2023-02-22

【中文标题】选中后如何覆盖 Material-UI 开关组件的样式？

【英文标题】：How can I override the style of the Material-UI switch component when checked?

【发布时间】：2020-11-24 16:34:30

【问题描述】：

我想控制开关组件的颜色，无论是选中还是取消选中。默认为红色。当开关状态为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
  
,

在这个回答中提出了一个有点类似的问题：How do I properly use theme overrides for the MUISwitch "bar" color when checked?，但这似乎不起作用，原因可能是 MUI 版本的差异，或者是因为在 createMuiTheme 中创建时样式不同。

【问题讨论】：

仅供参考 - 我已经更新了您引用的另一个问题的答案。最初的答案是针对 Material-UI v3。在 v4 中，“bar”被重命名为“track”。

【参考方案1】：

切换defaults to using the secondary color。

然后在colorSecondary CSS 中控制拇指的颜色。这是该课程的default styles：

  /* 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 文档中提取这些信息。我花了很多时间进行实验。我之前覆盖了滑块组件的样式，这变得更加流畅并且更容易。这个有点棘手。谢谢！

【参考方案2】：

试试这个

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
/>