Material ui 具有不同变体的材质UI排版

如何使Material UI的排版组件从其中的文本推断变体

我有以下代码：

import React from 'react';
import './styles.css';
import {createMuiTheme} from '@material-ui/core/styles';
import {ThemeProvider} from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';

const theme = createMuiTheme({
    typography: {
        h1: {
            fontSize: 200,
        },
        h2: {
            fontSize: 5,
        },
    },
});

export default function App() {
    return (
        <ThemeProvider theme={theme}>
            <Typography>
                <h1>Text H1</h1>
                <h2>Text H2</h2>
            </Typography>
        </ThemeProvider>
    );
}

从“React”导入React；
导入“./styles.css”；
从'@material ui/core/styles'导入{createMuiTheme}；
从'@material ui/styles'导入{ThemeProvider}；
从“@material ui/core/Typography”导入排版；
const theme=createMuiTheme({
排版：{
h1：{
尺寸：200，
},
h2:{
字体大小：5，
},
},
});
导出默认函数App（）{
返回(
文本H1
文本H2
);
}

渲染时，“文本H1”的字体大小应为200，“文本H2”的字体大小应为5。 不幸的是，情况并非如此

只有当我将字体的变体属性更改为h1或h2时，它才会更改字体大小。由于我有一个包含不同变体的长文本，我不想为每个变体创建一个排版元素

下面是它的一个代码沙盒：

---

如果要覆盖的

h1/h2

，应使用

createMuiTheme

功能的

overrides

选项：

export const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      root: {
        "& h1": {
          color: "blue"
        },
        "& h2": {
          color: "red"
        }
      }
    }
  }
});

---

您可以在这里看到一个工作示例：

是否还有其他干燥选项可以执行此操作？因为在这种情况下，我需要更改根目录和排版中的颜色…如果您使用基于调色板的颜色，您可以将这些颜色用作CreateMuiteme的一部分。你可以在这里读更多：我不想改变颜色，但尺寸。为此，我需要覆盖muityprography和排版，以使其工作。