在不使用 HOC 的情况下覆盖 Material UI 样式？

Question

有没有什么方法可以覆盖 Material UI 组件样式，而不必使用 withStyles() 创建一个全新的组件？

例如，假设我正在渲染以下内容，我只想更改 "Delete" 标签的颜色：

<div style={styles.rowFooter}>
  <FormControlLabel
    control={<ClearIcon />}
    label="Clear"
    title="Clear all fields."
    onClick={clearFields}
  />
  <FormControlLabel
    control={<DeleteIcon />}
    label="Delete"
    title="Delete this row."
    onClick={deleteRow}
  />
</div>

为此，我通常必须：

创建一个 returns { color: "maroon" }.
创建一个新组件来呈现 "Delete" 按钮。
包装我的新组件 withStyles(newStylesFn)(MyComponent)。

但我不想做所有这些。有什么办法可以避免吗？

更新：

我知道的一种方法是只传递 CSS className。我一直在寻找除此之外的东西，因为在这种情况下它甚至无法覆盖嵌套元素。

我真正希望能够做的只是通过 style={{ color: "maroon" }}，但这只会改变图标的颜色，而不是实际的标签文本...

Answer 1

您可以使用类属性来覆盖 Material UI 提供的样式而不是 className.

<FormControlLabel
  control={<DeleteIcon />}
  label="Delete"
  title="Delete this row."
  classes={{
    label: 'labelStyle'
  }}
/>

styles.css

.labelStyle {
  color: maroon !important;
}

虽然这不是完美的解决方案，但它仍然可以在不使用 withStyles() 的情况下完成工作。

在不使用 HOC 的情况下覆盖 Material UI 样式？

Override a Material UI style without using an HOC?

css

reactjs

material-ui

jss

css-in-js