Question

material/core中的排版与material/system中的排版有什么区别？为什么它们来自不同的包装？两者在用法上有什么区别？另一个问题是，我已经在material-ui中看到了两种使用排版的方式来进行React：

使用印刷标签，如下所示：
```
<Typography>...</Typography>
```

通过使用版式组件通过createMuiTheme定义样式常量：

const theme = createMuiTheme({
  typography: {
    fontFamily: 'Raleway, Arial',
  }
})

两种方法有什么区别？排版的实现方式与导入位置（/core或/system）有关吗？在实践中首选哪一个？

Answer 1

首先，它们不是等效的。

Typography不等于typography

如果我们要使用<Typography />及其全部功能和道具，请使用 @ material-ui / core ，这无疑是大多数情况下的最佳实践。

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

@ material-ui / system 与Material-ui 主题有关。

它已用于导出可以直接应用于其他组件的主题。

@ material-ui / system提供了称为“样式功能”的低级实用程序功能，用于构建功能强大的设计系统

您可以在默认typography和Theme的文档中找到System

请参阅相关文档：

MUI-System
MUI-Theme

我认为，这可能是一个不错的解决方案，可以快速使用MUI-theme样式某些本机或第三方libs组件。这就是我们使用它的场景。

主题使用情况

import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  palette: {
  }
});
<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;

import { makeStyles } from "@material-ui/core/styles";
import { Typography } from "@material-ui/core";
const useStyles = makeStyles(theme => ({
  root: {
    color: theme.palette.primary,
  }
}));

const classes = useStyles();

<Typography className={classes.root} />

Answer 2

材料/核心版式和材料/系统版式有什么区别？

核心软件包中的一个是组件，用于显示文本，类似于标头和标题html元素。系统软件包中的一个是您创建自己的样式化组件时使用的功能。 See here for details。

为什么它们来自不同的包装？

核心软件包中的导出是框架的可视组件。系统软件包中的导出是框架的行为组件。

两种方法有什么区别？排版的实现方式是否与导入它们的位置（核心或系统）有关？在实践中首选哪一个？

不，它们与您将它们导入的位置无关。除非有充分的理由，否则请使用该组件。第二种方法是当您要负责并将排版样式自己应用到组件上时。

材料/核心版式与材料/系统版式之间的区别

2 个答案:

主题使用情况