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

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

我想用styled-component来复制它,即const StyledRadio = styled(Radio)但我不太熟悉诸如&符号和美元符号之类的语法 - 我该怎么做?

#1楼 票数:3 已采纳

将样式组件与 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

#2楼 票数:2

这是适当的样式组件语法:

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

编辑 Radio 自定义颜色样式组件

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

  ask by Carrein translate from so

未解决问题?本站智能推荐:

3回复

Material-UI 中使用样式组件的媒体查询

Material UI 有一组很好的内置媒体查询: https : //material-ui.com/customization/breakpoints/#css-media-queries Material UI 还允许我们将 Styled-Components 与 Material UI
1回复

在样式组件中使用 Material-ui 主题

需要在如下样式的组件中使用主题间距值但没有成功。 当我第一次创建它时,样式应用于按钮。 但是现在,没有应用任何样式! 你可以在这里看到它: 沙箱。
1回复

如何在 React 样式组件中使用 Material 颜色?

是否可以在 React 样式组件中使用 Material UI 颜色? 如果是这样,它的语法是什么? 我正在尝试如下: 我也试过(所有猜测): 我找不到有效的方法。
5回复

使用样式组件覆盖 material-ui 按钮样式

我正在使用material-ui button并尝试通过样式组件覆盖边界半径(即,使其为 0)。 但是,它不起作用。 代码:
1回复

如何使用样式组件自定义Material-UI文本字段的边框颜色,宽度和高度

我对如何自定义Material-UI组件感到困惑。 我通读了文档,一个团队成员说他们使用样式化的组件。 我正在尝试改变 文本字段组件的边框颜色为#cbb0b0 宽度为200像素 高度为60像素。 我已经尝试了好几个小时,但还没有弄清楚。 我承认失败并寻求帮助! 这是我要修改的内容:
3回复

如何使用样式组件和 Material-UI 主题化组件?

是否有可能使用TypeScript将Material-UI "theme"-prop 与styled-components 一起使用? 示例 Material-UI 代码: 现在我想用样式组件替换此代码。 我已经测试了以下实现(和其他类似的实现)但没有成功:
1回复

如何使用样式组件将 prop 传递给 Material-UI 组件

我想使用样式组件设置 MUI 按钮的样式。 我想将variant='outlined'作为道具传递给组件。 这是我正在尝试的: 它抛出这个错误:
1回复

将 Material-UI 主题与样式化组件结合使用

我正在学习 Gatsby 并尝试使用 Material-UI 和 Styled Components 并应用我的主题来构建一些组件。 通过遵循此处解释的 material-ui 插件的 Gatsby 配置,我成功地应用了主题( https://www.gatsbyjs.org/packages/ga