材料/核心排版与材料/系统排版的差异

Question

material/core中的排版和material/system中的排版有什么区别？为什么它们来自不同的包裹？这两种用法有什么区别？还有一个问题是，我看到了两种在材料界面中使用排版的方法--用于反应的ui：

1. 使用这样的排版标签： ..。
2. 通过使用字体组件通过createMuiTheme定义样式常量： const主题= createMuiTheme({排版：{ fontFamily：'Raleway，Arial'，})

这两种方法有什么区别？您实现排版的方式是否与导入它们的位置有关(/core或/system)？在实践中哪一种更可取？

Answer 1

首先，它们是不对等的。

Typography不等于typography

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

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

@material-ui/system是与材料相关的东西-ui主题。

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

@material/system为构建功能强大的设计系统提供了称为“样式函数”的低级实用函数。

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

请参阅相关文件：

• 梅- 系统
• 梅- 主题

在我看来，这可能是一个很好的解决方案，可以快速地使用MUI-theme来样式一些本地或第三方库的组件。这就是我们使用它时的场景。

主题用法

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元素。系统包中的一个是您在创建自己的样式组件时使用的函数。详情见这里。

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

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

这两种方法有什么区别？您实现排版的方式是否与您导入它们的位置(核心或系统)有关？在实践中哪一种更可取？

不，它们和你进口的地方无关。使用组件，除非您有充分的理由不这样做。第二种方法是当您想要自己负责并将排版样式应用到组件上时。