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

Я использую material-ui в своем проекте, и у меня есть флажок в div с черным фоном. Но это выглядит не очень хорошо, потому что флажок тоже черный. Как изменить цвет флажка от черного до другого цвета?

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

Это старый вопрос, но для тех, кто использует материал 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" в функции рендеринга.

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

example

Ответ 3

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

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

enter image description here

Ответ 4

Могут быть два подхода.

  1. "локальный"

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

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

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

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

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

checkbox theme settings

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

Ответ 5

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

.thsvg svg{
  fill: white !important;
}


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