时间戳

首页 > 解决方案 > 在 Material UI 中使用样式组件应用单选按钮颜色？

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

问题描述

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

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

我想用styled-componentie来复制它，const StyledRadio = styled(Radio)但我对 & 和美元符号等语法不太熟悉 - 我该怎么做？

标签： reactjsmaterial-uistyled-components

解决方案

当使用带有 MUI 的样式化组件时，CSS 将应用于root组件的类。如果您需要应用更具体的样式，则需要定位相关类。在这种情况下，您需要定位.Mui-checked该类：

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

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

这是代码沙箱中的一个工作示例：https ://codesandbox.io/embed/styled-components-9pewl

推荐阅读