选中后如何覆盖Material-UI开关组件的样式? [英] How can I override the style of the Material-UI switch component when checked?

问题描述

我想控制开关组件的颜色，无论是选中状态还是未选中状态.默认情况下它是红色的.我想要球形旋钮"当开关的状态经过 checked:true 时为黄色，而我希望在 checked:false

时为灰色.

我必须通过使用 createMuiTheme 和 ThemeProvider 实现样式，由于其性质，我不能直接在组件上使用类我的项目.

我尝试在此处遵循其自定义紫色旋钮的样式示例:

I want to control the color of the switch component, both when it is checked and when is is unchecked. By default it is red. I want the "ball knob" to be yellow when the state of the switch is checked: true and I want it to be grey when is it checked: false

I must be achieving the styling with the use of createMuiTheme and ThemeProvider I cannot be using classes directly on the component due to the nature of my project.

I have tried to follow the styling example of their custom purple knob here: https://codesandbox.io/s/x8bz8 Source: https://material-ui.com/components/switches/

Unfortunately I haven't been able to figure out how to controle the color the the ball when it is checked (it always falls back to the default red). I have succeeded setting the colors of the track when both checked and not checked, and I have also been able to set the color of the ball when it is not checked. Can someone help me figure out how I can apply color style to the ball when it is checked?

I have made a CodeSandbox where I have been messing around: 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>
  );

I have also tried this:

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

Which was proposed in this answer to a somewhat similar question: How do I properly use theme overrides for the MUISwitch "bar" color when checked? but that does not seem to be working for what ever reason, maybe differences in MUI version or because the styles are different when created within createMuiTheme.

解决方案

Switch defaults to using the secondary color.

The color of the thumb is then controlled within the colorSecondary CSS. Here are the default styles for that class:

  /* 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,
    },
  },

You can adjust the checked color in your theme with the following (which shows overriding both the thumb and the track):

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

这篇关于选中后如何覆盖Material-UI开关组件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！