Блог

Следующий код, адаптированный из Material-UI docs для настройки Switch , позволяет установить цвет переключателя на синий:

 import React from 'react'

import Switch from '@material-ui/core/Switch'
import {withStyles} from '@material-ui/core/styles'


const ColoredSwitch = withStyles({
  switchBase: {
    'amp;$checked': {
      color: 'blue',
    },
  },
  checked: {},
  track: {},
})(Switch)
  

Но при попытке адаптировать его так, чтобы цвет можно было задавать свойствами компонента, он просто не работает. Событие следующий код (который является только псевдодинамическим) отображается для переключателя по умолчанию:

 const ColoredSwitch = withStyles({
  switchBase: {
    'amp;$checked': {
      color: props => 'blue',
    },
  },
  checked: {},
  track: {},
})(Switch)
  

Наверное, я делаю что-то не так, но не могу понять, что.

Следуйте этому примеру для передачи реквизита, если вы должны использовать withStyles HOC: https://material-ui.com/styles/basics/#adapting-the-higher-order-component-api

 const ColoredSwitch = withStyles({
  switchBase: {
    "amp;.Mui-checked": {
      color: (props) => props.customchecked
    }
  },
  checked: {},
  track: {}
})((props) => {
  const { classes, ...other } = props;
  return <Switch classes={{ switchBase: classes.switchBase }} {...other} />;
});
  

Вы также можете использовать makeStyles

 const useStyles = makeStyles({
  switchBaseChecked: {
    "amp;.Mui-checked": {
      color: (props) => props.color
    }
  }
});

export default function Switches() {
  const props = { color: "green" };
  const classes = useStyles(props);
  return (
    <Switch
      color="primary"
      classes={{
        checked: classes.switchBaseChecked
      }}
    />
  );
}