如何为MUI单选按钮设置外圈与内圈不同的颜色样式？

不需要完全自定义图标，通过MUI的样式覆盖就能轻松实现，复杂度很低。核心思路是利用MUI的内置CSS类名，分别选中单选按钮的外圈和内部填充元素，单独设置颜色：

• 选中状态下的外圈：对应.Mui-checked类下的单选按钮根元素的borderColor
• 选中状态下的内部填充：对应.Mui-checked类下的.MuiRadio-icon元素的color

方法一：使用sx属性快速定制 #

直接在Radio组件上通过sx属性写内联样式：

import Radio from '@mui/material/Radio';

<Radio
  sx={{
    '&.Mui-checked': {
      // 设置选中状态的外圈颜色
      borderColor: '#2563eb',
      '& .MuiRadio-icon': {
        // 设置选中状态的内部填充颜色
        color: '#f97316',
      },
    },
    // 可选：自定义未选中状态的外圈颜色
    '&:not(.Mui-checked)': {
      borderColor: '#9ca3af',
    },
  }}
  checked={true}
  onChange={() => {}}
/>

方法二：使用styled组件复用样式 #

如果需要在多个地方使用这个定制的单选按钮，推荐用styled创建复用组件：

import { styled } from '@mui/material/styles';
import Radio from '@mui/material/Radio';

const CustomColorRadio = styled(Radio)(({ theme }) => ({
  '&.Mui-checked': {
    borderColor: '#16a34a',
    '& .MuiRadio-icon': {
      color: '#fef08a',
    },
  },
}));

// 组件使用示例
<CustomColorRadio checked={false} onChange={() => {}} />
<CustomColorRadio checked={true} onChange={() => {}} />

这种方式本质是通过CSS类名优先级覆盖MUI的默认样式，属于官方支持的常规定制手段，只是文档没有单独针对“分离内外圈颜色”这个场景做示例说明。

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