如何在Material UI的createMuiTheme中添加排版变体及同一H标签多样式

嘿，我来帮你搞定这两个Material UI排版相关的问题！

1. 如何在Material UI排版系统中添加更多变体 #

要给Material UI的排版系统新增自定义变体，你只需要在createMuiTheme的typography配置里扩展variants数组就可以了。每个变体可以定义自己的字体样式、组件类型等属性。

举个实际的代码例子，比如我们新增一个"captionBold"的变体：

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';

const theme = createMuiTheme({
  typography: {
    variants: [
      {
        // 自定义变体名称
        name: 'captionBold',
        // 渲染的HTML标签
        component: 'span',
        // 样式配置
        style: {
          fontSize: '0.75rem',
          fontWeight: 700,
          letterSpacing: '0.03333em',
          textTransform: 'uppercase',
        },
      },
    ],
  },
});

// 使用的时候直接指定variant属性
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="captionBold">这是自定义的粗体说明文本</Typography>
    </ThemeProvider>
  );
}

这样你就可以在项目中随时调用这个新增的排版变体了。

2. 能否在createMuiTheme中为同一H标签添加多个变体 #

当然可以！你不需要局限于默认的h1变体，完全可以为<h1>标签创建多个不同样式的自定义变体，核心思路还是利用typography.variants数组，指定每个变体的component为'h1'，然后分别定义不同的字体样式。

比如你需要的衬线和无衬线两种H1样式，代码可以这么写：

const theme = createMuiTheme({
  typography: {
    variants: [
      {
        name: 'h1-serif',
        component: 'h1',
        style: {
          fontFamily: '"Times New Roman", Times, serif',
          fontSize: '3rem',
          fontWeight: 700,
          lineHeight: 1.2,
        },
      },
      {
        name: 'h1-sansSerif',
        component: 'h1',
        style: {
          fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
          fontSize: '3rem',
          fontWeight: 500,
          lineHeight: 1.167,
        },
      },
    ],
  },
});

// 使用时选择对应的变体即可，渲染出来的都是<h1>标签，但样式不同
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h1-serif">这是衬线字体的H1</Typography>
      <Typography variant="h1-sansSerif">这是无衬线字体的H1</Typography>
    </ThemeProvider>
  );
}

这样既满足了同一H1标签的不同样式需求，又能通过Material UI的主题系统统一管理样式，非常方便。

内容的提问来源于stack exchange，提问作者Ahmed Hakim