reactjs - @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 导入样式 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

没有默认主题，需要 createTheme/ ThemeProvider带有默认的 Material 主题(与其他计划中的 theme 相反)

传统造型包
取决于新 @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