材料-UI排版与不同的变体。

Question

如何使Material-UI的排版组件从其内部的文本中推断出变量？

我有下面的代码，当渲染时，"Text H1 "的字体大小应该是200，"Text H2 "的字体大小应该是200。

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>
    );
}

渲染时，"Text H1 "的字体大小应该是200 而 "Text H2 "的字体大小应该是5。不幸的是，事实并非如此。

只有当我将Typography的变体道具改为h1或h2时，它才会改变字体大小。因为我有一个长长的文本，有不同的变体，我不想为每个变体创建一个Typography元素。

这里是一个代码沙盒。https:/codesandbox.ioselegant-bouman-fz3j6?file=srcApp.js:0-604。

Answer 1

如果你想覆盖 h1/h2 你们应该使用 overrides 的选择。createMuiTheme 函数。

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

你可以在这里看到一个工作示例。https:/codesandbox.iosmui-theme-typography-override-styles-192jk?file=demo.js。