Как я могу переопределить стиль компонента переключателя Material-UI, если он установлен?

Question

Я хочу управлять цветом компонента переключателя, как когда он отмечен, так и когда он не отмечен. По умолчанию он красный. Я хочу, чтобы «шариковая ручка» была желтой, когда переключатель находится в состоянии checked: true, и я хочу, чтобы она была серой, когда она checked: false

I должна достигать стилизация с использованием 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 при проверке? , но похоже, что это не работает по какой-либо причине, возможно, из-за различий в версии MUI или из-за того, что стили разные при создании в createMuiTheme.

Answer 1

Переключатель по умолчанию использует вторичный цвет .

Цвет ползунка затем контролируется в пределах colorSecondary CSS. Вот стили по умолчанию для этого класса:

  /* 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: {
        colorSecondary: {
          "&$checked": {
            color: "#f2ff00"
          }
        },
      }
    }
  });

Вот измененный версия вашей песочницы, демонстрирующая это: https://codesandbox.io/s/material-demo-8x66o?file= / demo.tsx: 663-766