更改material-ui复选框的样式

Question

我正在使用React作为我的项目和styled-component包进行样式化，但我在使用样式化组件设置Material-ui复选框时遇到问题。我需要缩小复选框的边框，但我找不到Material-ui的任何界面来设置边框宽度。

这是我目前的代码：

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

用于样式化复选框组件的svg。我不知道props的哪个svg处理svg的边界宽度。我尝试了一些props，如font-weight，border-width，但它们都不起作用。

Codesandbox按钮：

预期结果：

目前的结果：

Answer 1

我认为好方法是在Checkbox的icon中传递一个新图标。

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

<CustomIcon />可能是：

• 自定义svg具有您需要的确切样式。
• 带有css的React / Styled组件（可以是带有border，borderRadius，width，height属性的div）。

Doc：https://material-ui.com/api/checkbox/#props