更改 Material-ui 复选框的样式

Question

我将 React 用于我的项目并使用 styled-component 包进行样式设置，但是我在使用样式组件设置 Material-ui 复选框时遇到问题。我需要缩小复选框的边框，但我找不到 Material-ui 的任何接口来设置边框宽度的样式。

这是我当前的代码：

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

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

代码沙盒按钮：

预期结果：

当前结果：

Answer 1

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

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

<CustomIcon /> 可能是：

• 具有您需要的精确样式的自定义 svg。
• 带有 css 的 React/Styled 组件（可以是具有边框、边框半径、宽度、高度属性的 div）。

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