如何在 Material UI/React 中全局更改字体粗细

Question

我想在我的 Material UI React 项目中全局使用 fontweight 300，但是默认设置是 400。我只是想出了如何在特定组件上覆盖 fontWeight（比如下面代码中的 h3），所以我寻求帮助为我将在未来使用的所有 Material UI 组件全局设置它。

overrides: {
            MuiTypography: {
               h3: {
                fontWeight: 300
            }},
            MuiTableCell:{
              root:{
                fontWeight: 200
              }
            },
          },

在下面的代码示例中，我使用 createMuiTheme 同时更改所有组件的 FontFamily 和 borderRadius，但我不知道如何同时为所有 Material UI 组件设置 FontWeight。

const theme = createMuiTheme({
  typography: {
    fontFamily: [
      'Sora',
      'sans-serif'
    ].join(','),
  },
  shape:{
    borderRadius:12
  },

Answer 1

tru 将"" 添加到fontWeight

 h3: {
  "fontWeight": 200,
},

Answer 2

您可以在主题的排版配置中使用allVariants 属性：

import { createTheme } from "@mui/material/styles";

// Create a theme instance.
const theme = createTheme({
  typography: {
    allVariants: {
      fontWeight: 300,
    },
  },
});

export default theme;