1

有什么方法可以覆盖 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。我一直在寻找除此之外的东西，因为在这种情况下它甚至无法覆盖嵌套元素。

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

4

1 回答 1

2

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

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

样式.css

.labelStyle {
  color: maroon !important;
}

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

于 2019-02-26T20:59:53.247 回答