@mui/material 和 @mui/system 有什么区别？

Question

我正在使用MUIv5并查看此文档@mui/material，仍然不清楚与 之间的区别@mui/system。

styled这主要是在使用( link ) 实用程序的情况下。

我注意到他们同时使用两者（可互换）：

import { styled } from '@mui/material/styles';

import { styled } from '@mui/system';

它们有什么区别/在什么情况下应该使用它们？

Answer 1

包含@mui/system所有 css 值和sxprop。这@mui/material是您通常想要使用的东西。很难区分这两者，因为它们本身Material UI使用的是基本的 css 实用程序。因此，当您导入材料时，您同时使用了它们。MUI SystemJoy UIMUI Base

您可以在以下文件中看到@mui/system依赖项：package.json@mui/material

"dependencies": {
    "@babel/runtime": "^7.17.2",
    "@mui/base": "5.0.0-alpha.87",
    "@mui/system": "^5.8.6",
    "@mui/types": "^7.1.4",
    "@mui/utils": "^5.8.6",
    "@types/react-transition-group": "^4.4.4",
    "clsx": "^1.1.1",
    "csstype": "^3.1.0",
    "prop-types": "^15.8.1",
    "react-is": "^17.0.2",
    "react-transition-group": "^4.4.2"
  }

研究 @mui/material 的文件也README.md有助于了解有关每个包的更多信息：

<h1 align="center">MUI Core</h1>

**MUI Core** contains foundational React UI component libraries for shipping new features faster.

- [_Material UI_](https://mui.com/material-ui/getting-started/overview/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://material.io/design/introduction/) system.

- [_Joy UI_](https://mui.com/joy-ui/getting-started/overview/) is a beautifully designed library of React UI components.

- [_MUI Base_](https://mui.com/base/getting-started/overview/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.

- [_MUI System_](https://mui.com/system/basics/) is a collection of CSS utilities to help you rapidly lay out custom designs.