Как я могу настроить цвет флажка в material-ui

Вам нужно использовать iconStyle, но поскольку значок флажка является изображением SVG, вам нужно установить цвет, используя fill вместо color:

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

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

Вот как вы это делаете:

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

Это старый вопрос, но для тех, кто использует материал 1.2.

IconStyle у меня не работает.

Однако я добился этого, перезаписав существующую тему и перенеся компонент «Флажок» в новую.

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);

Теперь вы можете использовать компонент CustomCheckbox в функции рендеринга.

И когда он установлен, цвет должен быть тем, который вы назначили.

Для меня это решается добавлением root и проверенных классов

const styles = () => ({
  root: {
    "&$checked": {
      color: "rgba(0, 0, 0, 0.54)"
    }
  },
  checked: {}
})

и передав его внутри классов флажка

<Checkbox
          checked={checked}
          classes={{
            root: classes.root,
            checked: classes.checked
          }}
          onChange={handleCheckBox}
        />

надеюсь, это поможет другим

Может быть два подхода.

1. "местный"

CheckBox имеет реквизиты labelStyle и iconStyle. Полагаю, вы можете начать с их настройки:

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

Я не уверен, что этого достаточно, так что, возможно, вам нужно поиграть с другим "стилем" реквизит флажка. Оформить заказ на все, что имеет "стиль" в названии.

2. Создать тему

вы можете установить некоторые настройки темы, которые будут влиять только на флажок:

вы можете использовать storybook-addon-material-ui demo page, чтобы создать свою тему и загрузить ее.

Для меня мне просто нужно было изменить флажок заголовка таблицы, это сработало для меня

.thsvg svg{
  fill: white !important;
}


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

checkBox имеет атрибут с именем color и может иметь значение по умолчанию, основное или дополнительное, например:

 <Checkbox
   onChange={doSth}
   value="checkedIncomplete"
   color="primary"
  />

вы можете изменить основной и вторичный цвета простым способом, написав их классы Css, которые для первичного: .MuiCheckbox-colorPrimary, а для вторичного: .MuiCheckbox-colorSecondary

так что вы можете редактировать в Css: .MuiCheckbox-colorPrimary { color : 'yourColor'}

Вы можете использовать тему пользовательского интерфейса материала.

const theme = createMuiTheme({
  overrides: {
    MuiCheckbox: {
      colorSecondary: {
        color: '#custom color',
        '&$checked': {
          color: '#custom color',
        },
      },
    },
  },
});

взято отсюда

Это сработало для меня на material-ui 4.1. Определите свойство color в параметре value = "primary" в Checkbox

<Checkbox color="primary"...>

Перезаписать стиль интерфейса материала по основному цвету. Добавьте эту запись в файл css, который импортируется в код javascript, который отображает Checkbox.

.MuiCheckbox-colorPrimary.Mui-checked {
color: #e82997 !important;
}

Вы можете назначить настраиваемый значок как для установленного, так и для снятого состояния, а затем стилизовать значки вашего флажка, например: <Checkbox checkedIcon={<CustomIcon style={{color:'red'}}/>} icon={<CustomIcon/>} inputProps={{ 'aria-label': 'decorative checkbox' }} {...props} />

Если кто-то придет позже за ответом,
если labelStyle и iconStyle вам не подходят,
и вы захотите изменить цвет позже, попробуйте следующее:

const useStyles = makeStyles<Theme, {color: string}, "root">({
    root: {
        color: (props: {color: string}) => props.color,
    },
})

export default function ColoredCheckbox() {
     const styles = useStyles({color: "#whatevercoloryouwant"})
     return <Checkbox color="default" className={styles.root} />
}