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

【问题标题】：How to change border color of radio button in Material-UI?如何更改 Material-UI 中单选按钮的边框颜色？
【发布时间】：2020-03-02 17:21:18
【问题描述】：

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

现在我有这个：

但我想得到的是

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

【问题讨论】：

@sinanspd 我正在使用createMuiTheme 我很确定::ng-deep 是一个有角度的东西
我的错。出于某种原因，我的大脑默认为有角度的，意识到问题是关于 React 的。删除了评论。道歉..
@Oskars 单选按钮是 svg 图标。您提到的两个类（PrivateRadioButtonIcon-layer 和MuiSvgIcon-root）都针对同一个元素，即 svg 元素。蓝色是填充颜色。为了使外环比现在更黑更薄，您需要创建一个自定义 svg 图标并通过icon 和checkedIcon props 使用它。有关使用自定义图标的示例，请参阅 this answer。

【解决方案1】：

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 - 希望你能得到答案:)

【讨论】：