изменить стиль материала-UI флажок - PullRequest
Новая
       43

изменить стиль материала-UI флажок

0 голосов
/ 09 апреля 2019

Я использую React для своего проекта и пакет styled-component для стилевого оформления, но у меня возникла проблема с установкой флажка Material-ui с помощью styled-component.Мне нужно сузить границу флажка, но я не могу найти интерфейс Material-ui для определения ширины границы.

Это мой текущий код: 

const StyledCheckbox = styled(Checkbox)`
  svg{
    color: #CDCDCD;
    font-size: 30px;
  }
`

для стилизации svg компонента флажка.Я не знаю, какие props из svg имеют дело с шириной границы svg.Я попробовал некоторые props как font-weight, border-width, но они оба не работают.

Кнопка Codesandbox: Edit vv50o01x2l

ожидаемый результат:

enter image description here

текущий результат:

enter image description here

1 Ответ

0 голосов
/ 09 апреля 2019

Я думаю, что хороший способ - передать новый значок в проп icon флажка. 

 <StyledCheckbox
    checked={checked}
    onChange={onChange}
    color="primary"
    icon={<CustomIcon />}
    {...others}
 />

<CustomIcon /> может быть:

  • custom svg с точнымстиль, который вам нужен.
  • Реагирует / Стилизует компонент с помощью css (это может быть div с свойствами border, borderRadius, width, height).

Док: https://material-ui.com/api/checkbox/#props

...