如何将Radio按钮UI从图1样式修改为图2样式（附React代码）

我正在设计一个表单，需要将Radio按钮的UI从图1所示样式修改为图2所示样式。

图1：

图2：

现有React代码如下：

<div className="col-lg-12 form-items quote">
    <ul>
        <li>
            <RadioGroup
                row
                aria-labelledby="demo-controlled-radio-buttons-group"
                name="Base_material"
                // value={formValues["Base_material"]}
                onChange={handleChange}
                defaultValue="FR-4"
            >
                <FormControlLabel
                    value="FR-4"
                    control={<Radio />}
                    label="FR-4"
                />
                <FormControlLabel
                    value="Aluminium"
                    control={<Radio />}
                    label="Aluminium"
                />
            </RadioGroup>
        </li>
    </ul>
</div>

实现方案 #

你使用的是Material-UI（MUI）的Radio组件，可通过以下几种方式自定义样式以匹配图2效果：

1. 组件级自定义样式（使用makeStyles）

通过MUI的makeStyles创建局部样式，精准修改单个Radio组件的外观：

import { makeStyles } from '@mui/styles';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';

const useStyles = makeStyles({
  radio: {
    '&.MuiRadio-root': {
      // 未选中状态样式
      color: '#666',
      '&:hover': {
        backgroundColor: 'rgba(0,0,0,0.04)',
      },
      // 选中状态样式
      '&.Mui-checked': {
        color: '#007bff', // 替换为图2的选中颜色
      },
      // 调整按钮大小
      '& .MuiSvgIcon-root': {
        fontSize: '20px',
      }
    }
  },
  label: {
    '&.MuiFormControlLabel-label': {
      fontSize: '14px',
      color: '#333',
      marginLeft: '8px', // 调整标签与按钮的间距
    }
  }
});

// 在组件中使用
const YourFormComponent = () => {
  const classes = useStyles();
  const handleChange = (event) => {
    // 你的变更逻辑
  };

  return (
    <div className="col-lg-12 form-items quote">
      <ul>
        <li>
          <RadioGroup
            row
            aria-labelledby="demo-controlled-radio-buttons-group"
            name="Base_material"
            onChange={handleChange}
            defaultValue="FR-4"
          >
            <FormControlLabel
              value="FR-4"
              control={<Radio className={classes.radio} />}
              label="FR-4"
              labelClassName={classes.label}
            />
            <FormControlLabel
              value="Aluminium"
              control={<Radio className={classes.radio} />}
              label="Aluminium"
              labelClassName={classes.label}
            />
          </RadioGroup>
        </li>
      </ul>
    </div>
  );
};

2. 全局主题自定义

如果需要所有Radio组件都应用该样式，可通过MUI的主题配置全局修改：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';

// 创建自定义主题
const theme = createTheme({
  components: {
    MuiRadio: {
      styleOverrides: {
        root: {
          color: '#666',
          '&.Mui-checked': {
            color: '#007bff',
          },
          '& .MuiSvgIcon-root': {
            fontSize: '20px',
          }
        }
      }
    },
    MuiFormControlLabel: {
      styleOverrides: {
        label: {
          fontSize: '14px',
          marginLeft: '8px',
          color: '#333',
        }
      }
    }
  }
});

// 在根组件包裹ThemeProvider
const App = () => {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的表单组件 */}
      <YourFormComponent />
    </ThemeProvider>
  );
};

3. 纯CSS覆盖样式

若不想使用MUI的样式方案，可直接通过全局CSS覆盖组件类名：

/* 针对表单容器内的Radio组件 */
.form-items .MuiRadio-root {
  color: #666;
}
.form-items .MuiRadio-root.Mui-checked {
  color: #007bff;
}
.form-items .MuiRadio-root .MuiSvgIcon-root {
  font-size: 20px;
}

/* 标签样式 */
.form-items .MuiFormControlLabel-label {
  font-size: 14px;
  margin-left: 8px;
  color: #333;
}

细节调整 #

根据图2的具体视觉细节，可补充以下样式：

• 若需要修改Radio的边框样式，可调整伪元素：

.form-items .MuiRadio-root:before {
  border-radius: 50%;
  border-color: #ccc;
}
.form-items .MuiRadio-root.Mui-checked:before {
  border-color: #007bff;
}

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