使用 Material UI 更改复选框的大小

Question

我目前无法使用 Material UI 将复选框的大小更改为自定义大小。代码如下

<Checkbox
    label="Check this box"
    onChange={() => dispatch(switchCompleted())}
    checked={status.showCompleted}
    style={{
      color: "#00e676",
      width: 36,
      height: 36
    }}
  />

我也尝试使用，size: 'medium'但复选框的大小仍然很小。有谁知道如何解决这个问题？

Answer 1

由于复选框项目实际上是一个 svg 图像，您可以使用transform.

您可以使用内联样式设置复选框样式，如下所示：

<Checkbox
        style={{
            transform: "scale(2)",
        }}
    />

如果您使用的是Material UI 样式解决方案，则可以通过类来实现。

const useStyles = makeStyles((theme) => ({
    tickSize: {
        transform: "scale(1.5)",
    },
}));

然后，您可以将上述类应用于您的复选框：

<Checkbox color="default" className={classes.tickSize} />

Answer 2

您可以向其中添加自定义类：

<Checkbox
    label="Check this box"
    onChange={() => dispatch(switchCompleted())}
    checked={status.showCompleted}
    classes={{root: 'custom-checkbox-root'}}
  />

然后在一个 css 文件中：

.custom-checkbox-root .MuiSvgIcon-root{
  width: 36px;
  height: 36px;
}

您可以在api 文档中查看更多信息