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

【问题标题】：How to get rid of space surrounding Material UI checkbox?如何摆脱 Material UI 复选框周围的空间？
【发布时间】：2021-10-08 18:01:06
【问题描述】：

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

目标是删除那个空间。

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

注意width: "20px" 无效。

【问题讨论】：

能否提供您当前的代码？
抱歉，现在添加代码
在 FormControlLabel 之外还是仅在 Checkbox 之外？

标签： html css reactjs material-ui frontend

【解决方案1】：

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

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

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

示例如下：

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Checkbox from '@material-ui/core/Checkbox'

const useStyles = makeStyles({
  root: {
    width: 20,
    padding: 0,
  },
})

const CustomizedCheckbox = () => {
  const classes = useStyles()

  return (
      <Checkbox className={classes.root}/>
  )
}

export default CustomizedCheckbox

【讨论】：