#css #reactjs #frontend #material-ui #styled-components
#css #reactjs #интерфейс #материал-пользовательский интерфейс #styled-компоненты
Вопрос:
Я использую 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: 
ожидаемый результат:
текущий результат:
Комментарии:
1. Вы пробовали
border-radius?2. Я тоже пробовал это, это не работает.
Ответ №1:
Я думаю, что хороший способ — передать новый значок в реквизите icon флажка.
<StyledCheckbox
checked={checked}
onChange={onChange}
color="primary"
icon={<CustomIcon />}
{...others}
/>
<CustomIcon /> может быть:
- пользовательский svg с точным стилем, который вам нужен.
- Реагирующий / стилизованный компонент с помощью css (это может быть div со свойствами border, borderRadius, width, height).