如何用aphrodite覆盖资料-ui className？

Question

我在用React和样式设计一些图标。我使用材料用户界面库作为组件。我使用的组件之一是FontIcon。它已经有了一个className，我无法用aphrodite风格的passed覆盖它。

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

如果我在这个控件上设置了样式，它可以很好地工作：

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

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

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

谢谢!

Answer 1

问题是，此组件不允许传递自定义className属性，只允许使用style属性进行扩展，就像您在其PropTypes定义中看到的那样。

Material使用的是JS形式的样式，并不真正想处理“普通”CSS，尽管我有时同意它更容易覆盖。

您可以将组件封装在一个div中，然后给出自定义的className，然后将子组件样式化。除了做拉请求，没有太多的选择。