Comment personnaliser la couleur d'une case à cocher dans Material-ui?

Question

J'utilise material-ui dans mon projet et j'ai une case à cocher dans une div avec un fond noir. Mais ça n'a pas l'air bien parce que la case à cocher est noire aussi. Comment puis-je changer la couleur de la case à cocher du noir à une autre couleur?

Answer 1

Vous devez utiliser iconStyle, mais comme l’icône de case à cocher est une image SVG, vous devez définir la couleur en utilisant fill au lieu de color:

https://jsfiddle.net/27Lmaz48/1/

<Checkbox label='My checkbox' 
  labelStyle={{color: 'white'}}
  iconStyle={{fill: 'white'}}
/>

Answer 2

C'est une vieille question, mais pour ceux qui utilisent du matériel 1.2.

Le iconStyle ne fonctionne pas pour moi.

Cependant, j'ai atteint cet objectif en remplaçant le thème existant et en incorporant le composant "Case à cocher" à un nouveau.

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



const checkBoxStyles = theme => ({
    root: {
      '&$checked': {
        color: '#3D70B2',
      },
    },
    checked: {},
   })

const CustomCheckbox = withStyles(checkBoxStyles)(Checkbox);

Vous pouvez maintenant utiliser le composant "CustomCheckbox" dans la fonction de rendu.

Et quand c'est coché, la couleur devrait être celle que vous avez assignée.

entrez la description de l'image ici

Answer 3

Pourrait être deux approches.

1. "local"

CheckBox a les accessoires labelStyle et iconStyle. Je suppose que vous pouvez commencer par les ajuster

<Checkbox
  label="Custom icon"
  labelStyle={{color: 'white'}}
  iconStyle={{color: 'white'}}
/>

Je ne sais pas si c'est suffisant alors vous devrez peut-être jouer avec d'autres "Style" accessoires de Checkbox . Commander tout ce qui a "style" dans le nom.

2. Créer un thème

vous pouvez définir un paramètre de thème qui n’affectera que la case à cocher:

 

vous pouvez utiliser storybook-addon-material-ui demo page pour créer votre thème et le télécharger.

Answer 4

Pour moi, j'avais juste besoin que la case à cocher d'en-tête de table ait été modifiée

.thsvg svg{
  fill: white !important;
}


<TableHeader
   className="thsvg"
    displaySelectAll={true}
    adjustForCheckbox={true}
    enableSelectAll={true}>
  <TableRow>     
    <TableHeaderColumn>Name</TableHeaderColumn>
  </TableRow>
</TableHeader>

Answer 5

Voici comment vous le faites:

 <FormControlLabel  
                control={
                  <Checkbox
                    checked={cryon}
                    onChange={this.handleChange('cryon')}
                    style ={{
                      color: "#00e676",
                    }}
                    value="cryon"
                  />
                }
                label={<Typography variant="h6" style={{ color: '#2979ff' }}>Work</Typography>}
              />