如何使用 Material-UI 将排版主题默认设置应用于常规标签？答案

【问题标题】：How do I get typography theme defaults to apply to regular tags with Material-UI?如何使用 Material-UI 将排版主题默认设置应用于常规标签？
【发布时间】：2019-01-22 13:58:19
【问题描述】：

所以，我已经阅读了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。我对如何使用该库感到困惑：

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

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案1】：

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

没有。 Material UI（以及一般的 Material Design）中排版的想法是为您的应用程序主题提供一致的变体规模：https://material.io/design/typography/the-type-system.html#

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

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

就像@Chimera.Zen 回答的那样，您可以使用withStyles HOC 将主题样式和字体变体应用于任何反应组件或html标签。但这是另一种方法，通过在您的 JSS 样式中重用主题排版定义，我发现它更有用：

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

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

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

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

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

另一种方法是使用“jss-global”插件，就像 MUI 作者 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);

【讨论】：

这是一个比我更好的答案，应该是首选。
如果组件不是MyComponent 而是ThirdPartyComponent 像DraftJS 怎么办？我们真的不能给这样的组件添加类。
@Kal 我认为这真的取决于第三方组件样式 API。 DraftJS 如何支持设置样式？在某些情况下，使用“@global”样式应该可以解决样式组件的问题。其他组件提供用于样式的道具...
@Ricovitch 谢谢。我最终在 Draftjs 中创建了新组件，而不是使用它们的内置组件。例如，他们在h1 块中使用“header-one”。我创建了mui-h1 组件，而不是使用他们的 h1 版本，这样我可以使用 mui 对其进行样式设置。

【解决方案2】：

可以，但您不必这样做。
是的，使用 withStyles 组件和正在定义的 styles。请参阅答案末尾的示例
Paper、Drawer 等组件将采用主题默认值，也可以在启动 <MuiThemeProvider> 的组件中更改主题默认值。普通的 HTML 元素需要在使用它的组件中定义一个样式，或者在样式表中定义一个类名。

如果你说style.root，你可以将它应用到一个Material-UI组件，一个div，span，p，a等。如果它应用到一个MUI组件， style.root 中的样式将覆盖默认值。

以Material-UI Paper 组件为例，以styles.paragraph 为例：

const styles = theme => ({
  root: {
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
  },
  paragraph: {
    color: '#FFF',
    textAlign: 'center',
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
});

这些样式现在可以应用于任何元素

<div className={styles.root}>
  <Paper className={styles.root}>
    <Typography component="p" className={styles.paragraph}>
      Paper can be used to build surface or other elements for your application.
    </Typography>
  </Paper>
</div>

【讨论】：