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。我对打算使用该库的方式感到困惑：

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

Answer 1

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

不。 Material UI（通常是Material Design）中的排版思想是为您的应用程序主题提供https://material.io/design/typography/the-type-system.html#

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

有什么方法可以轻松地将主题排版中的样式应用于常规HTML标签（例如h1-6，p等）？

就像@ Chimera.Zen回答的那样，您可以使用withStyles HOC将主题样式和字体变体应用于任何react组件或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”样式应用于整个应用程序。

另一种方法是使用MUI作者https://github.com/mui-org/material-ui/issues/9988#issuecomment-426631645在此处说明的'jss-global'插件：

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

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

Answer 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>

如何获得版式主题默认设置以应用于Material-UI的常规标签？

2 个答案: