如何覆盖Base Web中Radio Group的样式以调整单选框间距？

Base Web官方推荐通过组件内置的overrides属性或主题定制来调整Radio Group的单选框间距，以下是具体实现方案：

方案一：通过overrides属性定制单组Radio的间距 #

直接在RadioGroup组件中通过overrides配置Radio子组件的外边距，可灵活控制单组单选框的间距：

import { RadioGroup } from 'baseui/radio-group';

const RadioGroupWithSpacing = () => (
  <RadioGroup
    name="demo-group"
    options={[
      { label: '选项A', value: 'a' },
      { label: '选项B', value: 'b' },
      { label: '选项C', value: 'c' }
    ]}
    overrides={{
      Radio: {
        style: () => ({
          // 垂直排列时设置底部间距，按需修改数值
          marginBottom: '16px',
          // 若为水平排列，替换为右侧间距
          // marginRight: '24px',
          // 移除最后一项的多余间距
          '&:last-child': {
            marginBottom: '0'
            // 水平排列对应：marginRight: '0'
          }
        })
      }
    }}
  />
);

方案二：自定义主题全局统一调整间距 #

如果需要全局所有Radio Group都使用相同间距，可通过ThemeProvider定制主题：

import { ThemeProvider } from 'baseui';
import { RadioGroup } from 'baseui/radio-group';

// 自定义主题配置
const customTheme = {
  radioGroup: {
    // 垂直排列全局间距
    radioMarginBottom: '16px',
    // 水平排列全局间距（按需启用）
    // radioMarginRight: '24px'
  }
};

const App = () => (
  <ThemeProvider theme={customTheme}>
    <RadioGroup
      name="global-group"
      options={[
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' }
      ]}
    />
  </ThemeProvider>
);

方案三：CSS类名覆盖（应急方案） #

若上述官方方式不适用，可通过自定义类名结合CSS调整（不推荐，可能存在样式优先级问题）：

1. 给RadioGroup添加自定义类名：

import { RadioGroup } from 'baseui/radio-group';
import './radio-styles.css';

const StyledRadioGroup = () => (
  <RadioGroup
    name="css-group"
    options={[
      { label: '选项X', value: 'x' },
      { label: '选项Y', value: 'y' }
    ]}
    className="custom-radio-group"
  />
);

2. 在CSS文件中设置间距：

.custom-radio-group .baseui-radio-group__radio {
  margin-bottom: 16px;
}
.custom-radio-group .baseui-radio-group__radio:last-child {
  margin-bottom: 0;
}

注意：优先使用overrides或主题定制方案，这是Base Web官方支持的样式修改方式，能避免样式冲突和版本兼容问题。

内容的提问来源于stack exchange，提问作者Neven.Leung