如何使用 Material-UI 将版式主题默认值应用于常规标签？

所以，我读过https://material-ui.com/style/typography/ https://material-ui.com/style/typography/我正在加载 Roboto 字体。我希望有一个简单的组件，例如：

const theme = createMuiTheme();

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <p>Hello world!</p>
    </MuiThemeProvider>
  );
};

将使用 Roboto （默认字体）设置 p 标签的样式。但这并没有发生。如果我将代码更改为：

const theme = createMuiTheme();

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <Typography>Hello world!</Typography>
    </MuiThemeProvider>
  );
};

它按预期工作。插入 p 标签以及排版 css。我对如何使用该库感到困惑：

1. Material-UI 的想法是我要用自定义 React 元素替换所有常规 html 标签吗？
2. 有什么方法可以轻松地将主题排版的样式应用到常规 html 标签，如 h1-6、p 等？
3. 我是否希望自己在某些顶级组件上使用 withStyles 来设置所有常规 html 元素的样式？

1. Material-UI 的想法是我要用自定义 React 元素替换所有常规 html 标签吗？

不。Material UI（以及一般的 Material Design）中的版式设计理念是在您的应用程序主题中提供一致的变体规模：https://material.io/design/typography/the-type-system.html# https://material.io/design/typography/the-type-system.html#

然后，您可以以不同的方式使用此排版样式，如下面的 2. 和 3. 中所述

2. 有什么方法可以轻松地将主题排版的样式应用到常规 html 标签，如 h1-6、p 等？

就像 @Chimera.Zen 回答的那样，您可以使用以下命令将主题样式和字体变体应用到任何 React 组件或 html 标签withStylesHOC。但我发现还有另一种方法更有用，即在 JSS 样式中重用主题排版定义：

const styles = theme => ({
  paragraph: {
    ...theme.typography.body1
  }
});

const MyComponent = props => (
  <p className={props.classes.paragraph}>
    My styles text
  </p>
);

3. 我是否希望自己在某些顶级组件上使用 withStyles 来设置所有常规 html 元素的样式？

你不是。如果您愿意，您可以设置单个组件的样式，但您可能会更多地使用继承并使用容器组件（如 Paper、Drawer 等）或您自己的容器组件的默认样式。

您可以实现一个全局容器组件（例如“Root”或“App”...），将默认的“body1”样式应用于整个应用程序。

另一种方法是使用“jss-global”插件，如 MUI 作者此处所述https://github.com/mui-org/material-ui/issues/9988#issuecomment-426631645 https://github.com/mui-org/material-ui/issues/9988#issuecomment-426631645 :

import { withStyles } from '@material-ui/core/styles';

export default withStyles({
  '@global': {
    body: {
      ...theme.typography.body1
    },
  },
})(() => null);