Reactjs 使用材质UI中的样式化组件应用radiobutton颜色？

在Material UI文档中，他们提供了示例代码来显示如何更改Radiobutton的颜色

const GreenRadio = withStyles({
  root: {
    color: green[400],
    '&$checked': {
      color: green[600],
    },
  },
  checked: {},
})(props => <Radio color="default" {...props} />);

const GreenRadio=with styles({
根目录：{
颜色：绿色[400]，
“&$checked”：{
颜色：绿色[600]，
},
},
选中：{}，
})（道具=>）；

---

我想用

样式化组件

来复制这一点，即

const StyledRadio=styled（Radio）

，但我对诸如符号和美元符号之类的语法不太熟悉-我该怎么做呢？

以下是适当的样式化组件语法：

const GreenRadio = styled(Radio)`
  color: ${green[400]};
  &.Mui-checked {
    color: ${green[600]};
  }
`;

---

相关文档：

将样式化组件与MUI一起使用时，CSS应用于组件的

根类。如果需要应用更具体的样式，则需要针对相关类。在这种情况下，您需要针对
.Mui checked
类：

const StyledRadio = styled(Radio)`
  color: ${green[400]};
  &.Mui-checked {
    color: ${green[600]};
  }
`;

MUI文档非常好，因为它们列出了每个组件的CSS类名。如果访问，您将看到此处列出的
.Mui checked
类（在“全局样式”列下）

下面是代码沙箱中的一个工作示例：