React Material UI 复选框横向排列问题求助

方法一：正确使用FormGroup的row属性 #

你已经尝试用row属性实现横向排列，但需要注意属性写法是直接写row，无需额外标记。Material UI的FormGroup组件自带的row属性会自动将子元素设置为横向布局，修改后的代码如下：

<FormGroup row>
  <FormControlLabel
    control={
      <Checkbox
        size="small"
        checked={Android}
        onChange={handlePlatformSelectionChange}
        name="Android"
      />
    }
    label="Android"
  />
  <FormControlLabel
    control={
      <Checkbox
        size="small"
        checked={Ios}
        onChange={handlePlatformSelectionChange}
        name="Ios"
      />
    }
    label="iOS"
  />
</FormGroup>

如果该属性不生效，可能是Material UI版本兼容问题或父组件样式冲突，可尝试下面的自定义样式方案。

方法二：自定义CSS强制横向排列 #

通过内联样式或自定义类名，用flex布局实现横向排列：

内联样式写法 #

直接给FormGroup添加布局样式：

<FormGroup style={{ display: 'flex', flexDirection: 'row', gap: '16px', alignItems: 'center' }}>
  <FormControlLabel
    control={
      <Checkbox
        size="small"
        checked={Android}
        onChange={handlePlatformSelectionChange}
        name="Android"
      />
    }
    label="Android"
  />
  <FormControlLabel
    control={
      <Checkbox
        size="small"
        checked={Ios}
        onChange={handlePlatformSelectionChange}
        name="Ios"
      />
    }
    label="iOS"
  />
</FormGroup>

自定义类名写法（适合全局样式/CSS模块） #

// 组件代码
<FormGroup className="horizontal-checkbox-group">
  <FormControlLabel
    control={
      <Checkbox
        size="small"
        checked={Android}
        onChange={handlePlatformSelectionChange}
        name="Android"
      />
    }
    label="Android"
  />
  <FormControlLabel
    control={
      <Checkbox
        size="small"
        checked={Ios}
        onChange={handlePlatformSelectionChange}
        name="Ios"
      />
    }
    label="iOS"
  />
</FormGroup>

// CSS样式
.horizontal-checkbox-group {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

方法三：用Box组件替代FormGroup #

Material UI的Box组件更灵活，可直接用来包裹复选框实现横向布局：

<Box sx={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
  <FormControlLabel
    control={
      <Checkbox
        size="small"
        checked={Android}
        onChange={handlePlatformSelectionChange}
        name="Android"
      />
    }
    label="Android"
  />
  <FormControlLabel
    control={
      <Checkbox
        size="small"
        checked={Ios}
        onChange={handlePlatformSelectionChange}
        name="Ios"
      />
    }
    label="iOS"
  />
</Box>

内容的提问来源于stack exchange，提问作者Manushi