如何使排版主题默认应用于带有资料-UI的常规标记？

Question

所以，我读过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. 我要用自定义的React元素替换所有常规的html标记，这是Material的想法吗？
2. 有没有任何方法可以很容易地将样式从主题排版应用到h1-6、p等常规html标记？
3. 我是否希望自己在顶级组件上使用withStyles来设计所有常规的html元素？

Answer 1

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

不是的。在Material (和一般的材料设计)中排版的思想是提供一个一致的变体比例，以适应您的应用主题：https://material.io/design/typography/the-type-system.html#

然后，您可以以不同的方式使用这种字体样式，如下文第2和第3节所述。

1. 有没有任何方法可以很容易地将样式从主题排版应用到h1-6、p等常规html标记？

就像@Chimera.Zen回答的一样，您可以将主题样式和字体变体应用于任何具有withStyles临时特性的react组件或html标记。但是，下面是另一种方法，通过在JSS样式中重用主题字体定义，使我发现更有用的方法：

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

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

1. 我是否希望自己在顶级组件上使用withStyles来设计所有常规的html元素？

你不是。如果您愿意，可以对单个组件进行样式化，但您可能会更多地使用继承，并使用容器组件(如纸张、抽屉等)或您自己的容器组件的默认样式。

您可以实现全局容器组件(例如“根”或“App”.)将默认的"body1“样式应用于整个应用程序。

另一种方法是使用‘jss-全局’插件，如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);

Answer 2

1. 是的，但你不必这么做。
2. 是的，使用正在定义的withStyles组件和styles。参见答案末尾的示例
3. 文件、抽屉等组件将采用主题默认值，这也可以在启动<MuiThemeProvider>的组件中进行更改。普通的HTML元素需要在它正在使用的组件中定义一个样式，或者在样式表中定义一个类名。

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

使用材料-用户界面纸组件作为示例，使用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>