更改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，但是它们都不起作用。

“代码和框”按钮：

预期结果：

当前结果：

Answer 1

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

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

<CustomIcon />可能是：

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

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