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

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

0 голосов
/ 26 февраля 2019

Есть ли способ переопределить стили компонентов пользовательского интерфейса материала, не создавая совершенно новый компонент, используя 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" }}, но это толькоизменяет цвет значка, а не текст самого ярлыка ...

1 Ответ

0 голосов
/ 26 февраля 2019

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

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

styles.css 

.labelStyle {
  color: maroon !important;
}

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

...