当前位置：首页 > React

react中RadioGroup如何排版

2026-01-24 11:26:43React

使用 Flexbox 布局

将 RadioGroup 的容器设置为 display: flex，通过 flexDirection 控制方向（横向或纵向）。gap 属性可以调整选项间距。

<RadioGroup style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
  <Radio value="1">Option 1</Radio>
  <Radio value="2">Option 2</Radio>
</RadioGroup>

使用 Grid 布局

通过 CSS Grid 实现更复杂的排版，例如多列排列。gridTemplateColumns 定义列数和宽度。

react中RadioGroup如何排版

<RadioGroup style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
  <Radio value="A">A</Radio>
  <Radio value="B">B</Radio>
  <Radio value="C">C</Radio>
</RadioGroup>

内联样式与间距

直接为每个 Radio 添加 margin 或 padding 控制间距，适合简单场景。

react中RadioGroup如何排版

<RadioGroup>
  <Radio value="x" style={{ marginRight: '20px' }}>X</Radio>
  <Radio value="y">Y</Radio>
</RadioGroup>

结合组件库特性

若使用 MUI 或 Ant Design 等库，可直接利用其内置的 row 或 column 属性。例如 Ant Design 的 Radio.Group：

<Radio.Group optionType="button" buttonStyle="solid">
  <Radio.Button value="a">A</Radio.Button>
  <Radio.Button value="b">B</Radio.Button>
</Radio.Group>

响应式布局

通过媒体查询动态调整排版方向或间距，适应不同屏幕尺寸。

const styles = {
  group: {
    display: 'flex',
    flexDirection: 'row',
    '@media (max-width: 768px)': {
      flexDirection: 'column'
    }
  }
};
<RadioGroup style={styles.group}>...</RadioGroup>