如何去除Material UI Checkbox（复选框）周边的多余空白区域

核心问题原因 #

该问题是Material UI组件的默认内置样式导致的：

• FormControlLabel默认自带左右内边距和外边距，这部分边距区域都属于可点击的交互范围
• 给Checkbox设置的内联style优先级低于组件内置的样式规则，所以width: "20px"不生效

修复代码 #

直接替换原有代码即可：

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

修改说明 #

• 给外层FormControlLabel设置padding: 0和marginRight: 0，完全移除外层容器的多余边距，这部分就是之前点击空白也会触发选中的核心原因
• 用MUI专属的sx属性覆盖Checkbox的根样式，它的优先级高于组件内置样式，所以设置的宽高和padding: 0都会生效，移除Checkbox本身自带的默认内边距
• 如果不需要点击标签文字触发选中，还可以给label的Box加上style={{ pointerEvents: "none" }}，进一步缩小可点击范围到仅Checkbox本身

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture