如何更改 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中执行以下操作（通过sxprop）：

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 使边框变厚。我们必须访问path单选按钮周围边框的 SVG 内的元素。将以下内容添加到sx道具中：

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

   

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

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}
/>