reactjs - 使用 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 styling solution ，你可以通过一个类来实现这一点。

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

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

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