Переопределить стиль пользовательского интерфейса материала без использования HOC?
Есть ли способ переопределить стиль компонентов 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" }}, но это меняет только цвет значка, а не фактический текст метки...
Ответы 1
Вы можете использовать свойство классы для переопределения стилей, предоставляемых пользовательским интерфейсом материала, вместо className.
<FormControlLabel
control = {<DeleteIcon />}
label = "Delete"
title = "Delete this row."
classes = {{
label: 'labelStyle'
}}
/>
стили.css
.labelStyle {
color: maroon !important;
}
Хотя это не идеальное решение, оно по-прежнему работает без использования withStyles().
Также актуально - до этого решения я пытался использовать обычный CSS и читал о том, как вы можете изменить точку вставки JSS, поэтому вам не нужно использовать !important. Порядок внедрения CSS
Похоже, что в документации рекомендуется использовать CSS-in-JS с помощью библиотеки JSS. Вы можете узнать больше на Путь к лучшему стилю. Однако в документации также показано, как использовать классы с JSS (не CSS). Переопределение с помощью классов
Обе книги я читал, спасибо. Модули CSS с переменными CSS — это будущее IMO, и я собираюсь избегать JSS и других наборов CSS-in-JS, где это возможно.
Большое спасибо @Yakov-Kiszner. Я не мог найти упоминания об этом в документах. Если кто-нибудь знает, где это, пожалуйста, добавьте к этому ответу. Спасибо!