web-dev-qa-db-fra.com

Comment changer la couleur cochée du bouton radio Material-ui?

Le prop color ne peut prendre que trois valeurs (par défaut, primaire, secondaire) mais que faire si je veux que ma radio soit verte par exemple?

J'ai donc essayé de surcharger avec classes prop comme ceci:

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

Et puis à l'intérieur du composant:

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

Mais ça ne fonctionne pas.

javascriptreactjsradio-buttonmaterial-ui
5
Emile Netter

Trouvé une solution:

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

Et à l'intérieur du composant:

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

Vous devez avoir la clé root.

10
Emile Netter

Je pense que vous devez utiliser la clé de classe colorSecondary au lieu de colorPrimary car le bouton radio a la couleur secondaire par défaut

vous pouvez également remplacer les valeurs par défaut des couleurs primaires et secondaires et par défaut à l'aide de createMuiTheme et MuiThemeProvider composant dans votre composant racine, vous pouvez

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;

comme vous pouvez le voir dans l'exemple ci-dessous, vous enveloppez simplement vos composants avec MuiThemeProvider et chaque composant aura désormais de nouvelles couleurs primaires et secondaires

consultez ce lien depuis le site web de material-ui pour plus d'informations Themes

2
mostafa tourad