覆盖 material UI 主题的默认主题定义

Question

在 material UI 默认主题中存在 (css) class MuiTab-root。其中，除其他外，设置字体粗细（基于主题的排版定义）。

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

这是由 withStyles 使用 createMuiTheme 函数生成的。在创建过程中，它使用所提供对象的 typography.fontWeightMedium 来定义选项卡的字体粗细。我想做的是将默认主题的 font-weight 覆盖为 "normal"。理想情况下，声明它应该使用 typography.fontWeightNormal，否则，手动覆盖字体粗细。

我试过手动覆盖字体粗细。但是这没有用。

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

使用 chrome 检查显示标签的 fontWeight 仍然是 600（半粗体）。

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

Answer 1

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

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

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

覆盖 material UI 主题的默认主题定义

Override default theme definitions for material UI theme

javascript

reactjs

material-ui

jss