@Mui/材质/样式和@Mui/样式有什么不同？ [英] Difference between @mui/material/styles and @mui/styles?

问题描述

Material-UIv5中，有些API用法是从@mui/material/styles导入的，比如useTheme。有些API使用是从@mui/styles导入的，如makeStyles。我可以只从一个库(@mui/styles或@mui/material/styles)使用那些与样式相关的API吗？因为在Material-UI v4中，我从'@material-ui/core/styles'或'material-ui/styles'导入了所有与样式相关的API。

推荐答案

通常在v4中，您需要从@material-ui/core/styles导入样式接口。这个在后台使用JSS：

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

在v5中，它们changed the brand name to MUI。因此，包名称也发生了更改：

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

但是MUIv5也放弃了对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	附带默认材料主题(与其他计划的theme相对)
传统样式包	取决于新的@mui/system包
由JSS提供支持	情感驱动(作为默认样式引擎)
有makeStyles/withStyles	没有makeStyles/withStyles，而是有styled

不应将@mui/styles与@mui/material/styles混用。选择一个样式解决方案并坚持使用它，因为来自不同样式库的重复className可能会导致意外的副作用和难以找到的bug。如果您正在创建一个新项目或有一个小的v4项目，我建议完全迁移到情感解决方案，以避免增加额外的捆绑包大小，因为在新版本中，MUI组件使用情感，而不再使用JSS。

引用

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

这篇关于@Mui/材质/样式和@Mui/样式有什么不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！