如何更改 Material-UI 中单选按钮的边框颜色？

Question

我想更改 Material UI 单选按钮的外环。

https://material-ui.com/components/radio-buttons/

现在我有这个：

但我想得到的是

我尝试将PrivateRadioButtonIcon-layer类设置为蓝色， MuiSvgIcon-root为黑色，但我找不到设置PrivateRadioButtonIcon-layer样式的方法

Answer 1

我描述了两种解决方案（都适用于 MUI v5）：

1. 单独更改边框和圆圈颜色的纯 CSS解决方案。
2. 带有自定义图标的解决方案，以便您随意设计。

仅 CSS 解决方案

如果您只想更改问题标题中所述的边框颜色（而不是边框​​的厚度），您可以在MUI 5中执行以下操作（通过sx道具）：

1. 通过选择器'& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root)'设置边框样式，该选择器使用 CSS 通用兄弟组合器仅选择第一次出现的MuiSvgIcon-root类。
2. 通过选择器'& .MuiSvgIcon-root + .MuiSvgIcon-root'设置圆形样式，该选择器使用 CSS 相邻兄弟组合符 ( + ) 来访问第二个 svg。

单选按钮的完整代码：

<Radio
    {...otherRadioProps}
    sx={{
        '& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root)':
            {
                color: 'red',
            },
        '& .MuiSvgIcon-root + .MuiSvgIcon-root': {
            color: 'blue',
        },
    }}
/>

备注：

1. 边框粗细：我们不能使边框变细（如您的设计建议的那样），但我们可以仅通过 CSS 使边框变粗。 我们必须访问单选按钮周围边框的 SVG 内的path元素。 将以下内容添加到sx道具：

    '& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root) path': { stroke: 'red', strokeWidth: 3, },

   

   请注意，即使您在.MuiSvgIcon-root元素上设置了color: 'red' ，您也需要stroke: 'red', line 。

2. 我们不能直接使用类名来定位圆，因为 Material UI 为边框和圆提供了相同的类名，正如您在 Firefox DevTools 的截图中看到的那样：

   

带有自定义icon和checkedIcon组件的解决方案

如果你想要更薄的边框，你必须通过icon和checkedIcon添加自己的 SVG 图标。 要获得以下信息：

您可以使用以下图标组件：

const RadioButton = ({ checked }) => (
    <svg
        width="38px"
        height="38px"
        viewBox="0 0 24 24"
        fontSize="38px">
        <circle
            cx="50%"
            cy="50%"
            r="11px"
            stroke="red"
            stroke-width="1px"
            fill="none"
        />
        {checked && (
            <circle
                cx="50%"
                cy="50%"
                r="6px"
                fill="blue"
            />
        )}
    </svg>
);

并在您的 MUI Radio组件中使用它，如下所示：

<Radio
    icon={<RadioButton />}
    checkedIcon={<RadioButton checked />}
    {...otherProps}
/>

Answer 2

1 - 这是您正在使用的材料 UI 标签：-

<FormControlLabel value="" control={<Radio />} label="" />

2 - 给它 className 并在 Radio 标签上设置样式，如下所示：-

<FormControlLabel className="targetInsideOfRadio" value="" control={<Radio style={{color:"#979797"}} />} label="" />

3 - 转到 custom.css 文件并添加如下： -

.targetInsideOfRadio > span > span > div > svg ~ svg > path {
     color: #2149b9;
 }

4 - 希望你得到答案:)