如何摆脱 Material UI 复选框周围的空间？

Question

它造成的问题是显而易见的。即使用户在复选框之外单击，它仍然会更改框值。

目标是消除该空间。

            <FormControlLabel
              style={{ height: "25px" }}
              control={<Checkbox size="small" style={{ width: "20px" }} />}
              label={
                <Box component="div" fontSize={10}>
                  label
                </Box>
              }
            />

请注意，width: "20px"没有任何效果。

Answer 1

复选框具有默认填充。您可以通过传递自定义样式来删除它

<Checkbox size="small" style={{ width: "20px", padding:0 }} />

尽管我建议使用material-ui的makeStyles API并传递一个className。 https://material-ui.com/styles/api/#makestyles-styles-options-hook

这是示例：

<Checkbox size="small" style={{ width: "20px", padding:0 }} />