Как изменить цвет переключателя Material-ui проверенного цвета?

Question

Пропеллер color может принимать только три значения (по умолчанию, первичное, вторичное), но что, если я хочу, чтобы мое радио было зеленым, например?

Итак, я попытался переопределить с помощью classes prop следующим образом:

const styles = theme => ({
  radio: {
    colorPrimary: {
    '&$checked': {
      color: 'blue'
    }
  },
  checked: {},
  } 
})

А затем внутри компонента:

<FormControlLabel
   classes={{root: classes.formControlLabelRoot, label: classes.formControlLabel}}
   value="week"
   control={<Radio disableRipple classes={{colorPrimary: classes.radio}} />}
   label="Every week (Monday at 12:00)"
/>

Но это не работает.

Answer 1

Нашел решение:

const styles = theme => ({
  radio: {
    '&$checked': {
      color: '#4B8DF8'
    }
  },
  checked: {}
})

А внутри компонента:

<FormControlLabel
  classes={{root: classes.formControlLabelRoot, label: classes.formControlLabel}}
  value="day"
  control={
    <Radio
      disableRipple
      classes={{root: classes.radio, checked: classes.checked}}
    />
  }
  label="Every Day (at 12:00)"
/>

У вас должен быть ключ root.

Answer 2

Я думаю, вам нужно использовать colorSecondary ключ класса вместо colorPrimary, потому что переключатель имеет цвет вторичный по умолчанию

, также вы можете переопределить значения по умолчаниюдля основного и дополнительного цветов и цветов по умолчанию, используя createMuiTheme и MuiThemeProvider компонент в вашем корневом компоненте, вы можете

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import Button from '@material-ui/core/Button';

const theme = createMuiTheme({
  palette: {
    primary: { main: purple[500] }, // Purple and green play nicely together.
    secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
  },
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <div>
        <Button color="primary">Primary</Button>
        <Button color="secondary">Secondary</Button>
      </div>
    </MuiThemeProvider>
  );
}

export default App;

, как вы можете видеть в приведенном ниже примере, вы просто оборачиваетеваши компоненты с MuiThemeProvider и каждый компонент теперь будет иметь новый основной и дополнительный цвет

. Для получения дополнительной информации перейдите по этой ссылке с веб-сайта material-ui Темы