在 Material-UI v5 中，一些 API 使用是从 @mui/material/styles 导入的，例如 useTheme。还有一些 API 使用是从@mui/styles 导入的，比如makeStyles。我可以只使用一个库中的那些与样式相关的 API，@mui/styles 或 @mui/material/styles？因为，在 Material-UI v4 中，我从 '@material-ui/core/styles' 或 'material-ui/styles' 导入了所有与样式相关的 API。
【问题讨论】：
标签： reactjs material-ui
通常在 v4 中，您会从 @material-ui/core/styles 导入样式 API。这个在后台使用JSS：
import { makeStyles } from '@material-ui/core/styles';
在 v5 中，他们changed the brand name to MUI。结果包名也变了：
import { makeStyles } from '@mui/material/styles';
但 MUI v5 也放弃了对 JSS 的支持（makeStyles/withStyles 正在使用），因此他们将这些 API 移动到名为 @mui/styles 的旧包中。 （他们计划在 v6 中删除此 API，但存在一些阻力。有关更多信息，请参阅 this 问题）
import { makeStyles } from '@mui/styles';
并鼓励用户采用新的样式解决方案（sx、styled），使用情感作为默认样式引擎：
import { styled } from "@mui/material/styles";
综上所述，@mui/material/styles 和@mui/styles 的区别在于：
@mui/styles |
@mui/material/styles |
|---|---|
Doesn't come with a default theme, need createTheme / ThemeProvider
|
Come with a default material theme (as opposed to the other planned theme) |
| Legacy styling package | Depends on the new @mui/system package |
| Powered by JSS | Powered by emotion (as a default style engine) |
Has makeStyles/withStyles
|
Doesn't have makeStyles/withStyles, has styled instead |
您不应将@mui/styles 与@mui/material/styles 混用。选择一种样式解决方案并坚持使用它，因为来自不同样式库的重复类名会导致意想不到的副作用和难以发现的错误。如果您正在创建一个新项目或拥有一个小型 v4 项目，我建议您完全迁移到情感解决方案以避免添加额外的包大小，因为 MUI 组件使用情感，而不是新版本中的 JSS。
【讨论】：