@mui/material/styles 和 @mui/styles 之间的区别？

Question

在 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'或导入了所有与样式相关的 API 'material-ui/styles'。

Answer 1

通常在 v4 中，您可以从@material-ui/core/styles. 这个在幕后使用 JSS：

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

在 v5 中，他们将品牌名称更改为 MUI。结果，包名也发生了变化：

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

makeStyles但 MUI v5 也放弃了对 JSS（ /正在使用）的支持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。

参考

• https://mui.com/styles/basics/#main-content
• https://mui.com/guides/migration-v4/#heading-mui-material-styles