Не удалось переопределить стили с классами в Material-ui

Question

Я реализовал таблицу с компонентом TableRow из material-ui, у которого есть свойство под названием «selected». Когда "selected" имеет значение true, для него применяется розовый цвет фона (из темы по умолчанию). Я пытался изменить этот розовый цвет по умолчанию, согласно документам, я решил переопределить css классы например:

const styles = theme => ({
  rowSelected: {
    backgroundColor: theme.palette.grey[700]
  }
})
class CustomTableRow extends React.Component {
// basic component logic
render() {
const {classes, className, style } = this.props;
  <TableRow
    key={key}
    component="div"
    selected={true}
    hover={true}
    className={className}
    classes={{ selected: classes.rowSelected}}
    style={style}
  >
      // some children
  </TableRow>
}
export default withStyles(styles, { withTheme: true })(CustomTableRow);

Но это не сработало, что было очень запутанно. Потому что мне удалось сделать то же самое где-то в другом месте для компонента Drawer тем же методом, описанным выше.

Я отлаживал все свойства css с помощью Chrome Dev Tools. Больше всего я подозреваю, что розовый цвет, примененный к этому компоненту следующим образом:

.MuiTableRow-root.Mui-selected, .MuiTableRow-root.Mui-selected:hover {
    background-color: rgba(245, 0, 87, 0.16);

И мой собственный стиль класса имел более низкий приоритет, чем этот, который был выделен серым цветом.

UPDATE1:

Мой проект слишком велик, я не знаю, как упростить его для codeandbox.io. Возможно, мы сможем напрямую проверить исходный код material-ui, Исходный код TableRow . Что я делал, так это переопределил это объявление css в root

    '&$selected, &$selected:hover': {
      backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.selectedOpacity),
    },

, передав другое объявление selected ниже. Я понял это потому, что это &$selected, &$selected:hover обычно не css, даже если я скопирую это в rowSelected, это тоже не сработает.

UPDATE2:

Мне удалось переопределить этот backgroundColor с ключевым словом '! important':

const styles = theme => ({
  rowSelected: {
    backgroundColor: theme.palette.grey[700] + " !important",
  }
})

Я не знаю, является ли это идеальным решением. Это ясно показывает, что проблема заключается в приоритете css классов. Итак, как переопределить этот уже определенный backgroundColor в классе root с классом selected.

Пожалуйста, помогите, спасибо.

Answer 1

Чтобы обеспечить конкретность для выбранного класса, вы можете применить классы $selected и $selected:hover к своим переопределениям, как показано ниже

const styles = theme => ({
  rowSelected: {
    "&$selected, &$selected:hover": {
      backgroundColor: theme.palette.grey[800]
    }
  }
})

Пример демонстрации