reactjs - @mui/material/styles 和 @mui/styles 之间的区别？
问题描述
在 Material-UI v5 中，一些 API 使用是从 导入的@mui/material/styles，例如useTheme. 并且一些 API 使用是从 导入的@mui/styles，例如makeStyles. 我可以只使用一个库中的那些与样式相关的 API@mui/styles吗@mui/material/styles？'@material-ui/core/styles'因为，在 Material-UI v4 中，我从或导入了所有与样式相关的 API 'material-ui/styles'。
解决方案
通常在 v4 中，您会从@material-ui/core/styles. 这个在后台使用 JSS：
import { makeStyles } from '@material-ui/core/styles';
在 v5 中，他们将品牌名称更改为 MUI。结果，包名也发生了变化：
import { makeStyles } from '@mui/material/styles';
但是 MUI v5 也放弃了对 JSS（makeStyles正在withStyles使用）的支持，因此他们将这些 API 移动到一个名为@mui/styles. （他们计划在 v6 中删除此 API，但有一些回击。有关更多信息，请参阅此问题）
import { makeStyles } from '@mui/styles';
并鼓励用户采用新的样式解决方案（sx, styled），使用情感作为默认样式引擎：
import { styled } from "@mui/material/styles";
@mui/material/styles总而言之，和之间的区别在于@mui/styles：
@mui/styles |
@mui/material/styles |
|---|---|
没有默认主题，需要createTheme/ThemeProvider |
带有默认材质主题（与其他计划主题相反） |
| 传统样式包 | 取决于新@mui/system包 |
| 由 JSS 提供支持 | 由情感提供支持（作为默认样式引擎） |
有makeStyles/withStyles |
没有makeStyles/ withStyles，styled而是有 |
你不应该@mui/styles与@mui/material/styles. 选择一种样式解决方案并坚持使用它，因为来自不同样式库的重复类名会导致意想不到的副作用和难以发现的错误。如果您正在创建一个新项目或有一个小型 v4 项目，我建议完全迁移到情感解决方案以避免添加额外的包大小，因为 MUI 组件使用情感，而不是新版本中的 JSS。