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

Question

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

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

<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>

为此，我通常必须：

• 创建一个返回 { color: "maroon" } 的新样式函数。
• 创建一个新组件来呈现“删除”按钮。
• 包装我的新组件withStyles(newStylesFn)(MyComponent)。

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

更新：

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

我真正想做的只是传递style={{ color: "maroon" }}，但这只会改变图标的​​颜色，而不是实际的标签文本......

Answer 1

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

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

styles.css

.labelStyle {
  color: maroon !important;
}

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