javascript - 覆盖材质 UI 主题的默认主题定义

Question

在材质 UI 默认主题中存在 (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,
        }
    }
});

使用 chrome 检查显示选项卡的 fontWeight 仍为 600（半粗体）。

如何在这里覆盖默认定义？- 或者我是否必须依赖我在组件中使用的自定义类？

标签： javascriptreactjsmaterial-uijss

Answer 1

以下是手动覆盖的正确语法：

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

以下是相关文档：https ://material-ui.com/customization/components/#global-theme-override