Стиль темы MaterialUI для вложенных классов

Question

Я создаю тему для приложения с createMuiTheme. Я использую таблицу материалов, и мне нужно нацелиться на этот значок заголовка таблицы столбцов, который в данный момент сортируется:

Просмотр в инструментах разработчика он имеет следующие селекторы CSS:

.MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active .MuiTableSortLabel-icon {
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
}

Как я могу сделать это в объекте createMuiTheme из этого?

const theme = createMuiTheme({
    overrides : {
      MuiTableSortLabel: {
        root: {
          //i want to modify the icon color
          color: blue
        }
      }
    }
})

Answer 1

Если вы не знаете, как переопределить стили по умолчанию, лучше всего посмотреть, как определяются стили по умолчанию. Инструменты разработчика браузера покажут вам конечный результат, а исходный код покажет вам подход, используемый для генерации CSS с аналогичной специфичностью.

Ниже приведен соответствующий код из TableSortLabel который управляет цветом значка:

export const styles = theme => ({
  /* Styles applied to the root element. */
  root: {
    '&$active': {
      // && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
      '&& $icon': {
        opacity: 1,
        color: theme.palette.text.secondary,
      },
    },
  }
});

Вы можете использовать очень похожий синтаксис для переопределения темы:

const theme = createMuiTheme({
  overrides: {
    MuiTableSortLabel: {
      root: {
        "&$active": {
          "&& $icon": {
            color: "blue"
          }
        }
      }
    }
  }
});

Соответствующая документация JSS: https://cssinjs.org/jss-plugin-nested/?v=v10.0.3#use -rulename-to-reference-to-reference-a-local-rule-in-the-same-style-style