在 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 应用于组件的 root class。如果您需要应用更具体的样式，则需要定位相关 class。在这种情况下，您需要定位 .Mui-checked class:

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

MUI 文档非常好，因为它们列出了每个组件的 CSS class 名称。如果您访问 API docs for the Radio component，您会看到 .Mui-checked class 列在那里（在 'Global Styles' 列下）。

这是 Code Sandbox 中的一个工作示例：https://codesandbox.io/embed/styled-components-9pewl

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

Apply radiobutton color using styled-components in Material UI?

reactjs

material-ui

styled-components