Переопределить стиль пользовательского интерфейса материала без использования HOC?

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

Вы можете использовать классы prop для переопределения стилей, предоставляемых Material UI, вместо className.

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

styles.css

.labelStyle {
  color: maroon !important;
}

Хотя это не идеальное решение, оно все же делает работу без использования withStyles().