如何用阿芙罗狄蒂覆盖 material-ui 类名？

Question

我正在使用 React 并设计一些图标的样式。我正在使用 Material-UI library for my components. One of the components I'm using is the FontIcon 。它上面已经有一个类名，我无法用我传入的阿芙罗狄蒂风格来覆盖。

<FontIcon className="material-icons">
    bug_report
</FontIcon>

如果我在此控件上设置样式，它可以正常工作：

<FontIcon className="material-icons" style={{ color: 'red' }}>
  bug_report
</FontIcon>

如何覆盖现有的类名？我试过：

className={css(['material-icons', styles.colorize])}
className={css('material-icons', styles.colorize)}
className={('material-icons', css(styles.colorize))}

谢谢！

Answer 1

问题是此组件不允许传递自定义 className 属性，只能使用 style 进行扩展，如您在他们的 PropTypes definition.

Material-ui使用的是JS形式的样式，并不想处理"normal"CSS，尽管我有时也同意更容易覆盖。

您可以将您的组件包装在您自定义 className 的 div 中，然后对子组件进行样式化。除了拉请求，没有太多选择。

如何用阿芙罗狄蒂覆盖 material-ui 类名？

How to overwrite material-ui className with aphrodite?

javascript

reactjs

material-ui

aphrodite