Переопределить определения темы по умолчанию для темы пользовательского интерфейса материала

В теме пользовательского интерфейса материала по умолчанию существует класс (css) MuiTab-root. Которая, среди прочего, устанавливает вес шрифта (на основе определения типографики темы).

.MuiTab-root {
  font-weight: 600;
}

Он создается withStyles с помощью функции createMuiTheme. Во время создания он использует typography.fontWeightMedium предоставленного объекта для определения толщины шрифта вкладок. Я хочу заменить font-weight темы по умолчанию на «нормальную». В идеале, указав, что он должен использовать typography.fontWeightNormal, или, в противном случае, вручную переопределить толщину шрифта.

Я попытался вручную изменить толщину шрифта. Однако это не сработало.

const theme = createMuiTheme({
    typography: {
        fontWeightMedium: 600,
    },
    overrides: {
        '.MuiTab-root': {
          fontWeight: 400,
        }
    }
});

Проверка с использованием хрома показывает, что fontWeight вкладок по-прежнему 600 (полужирный полужирный).

Как здесь переопределить определение по умолчанию? - Или мне нужно полагаться на специальный класс, который я использую в компонентах?


reactjs javascript material-ui jss
person paul23    schedule 24.06.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        fontWeight: 400
      }
    }
  }
});

Изменить переопределение толщины шрифта вкладки

Вот соответствующая документация: https://material-ui.com/customization/components/#global-theme-override

person Ryan Cogswell    schedule 24.06.2019