在Material UI中使用样式化的组件应用单选按钮颜色？

Question

在Material UI文档中，他们提供了示例代码来演示如何更改单选按钮的颜色。

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

我想用styled-component代替const StyledRadio = styled(Radio)来复制它，但是我对＆符号和美元符号之类的语法不太熟悉-我该怎么做？

Answer 1

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

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

相关文档：https://material-ui.com/customization/components/#pseudo-classes

Answer 2

在MUI中使用样式化的组件时，CSS会应用于组件的.Mui-checked类。如果您需要应用更具体的样式，则需要定位相关的类。在这种情况下，您需要定位const StyledRadio = styled(Radio)` color: ${green[400]}; &.Mui-checked { color: ${green[600]}; } `; 类：

.Mui-checked

MUI文档真的很棒，因为它们列出了每个组件的CSS类名。如果您访问API docs for the Radio component，则会看到在那里列出了{{1}}类（在“全局样式”列下）。

下面是代码沙箱中的一个有效示例：https://codesandbox.io/embed/styled-components-9pewl