material ui usestyles 已弃用 - 我需要更改代码吗

Question

我对 material ui v5.5.2 关于如何使用 Styles() 有点困惑。该网站表示已弃用，但如果是这样，您仍然如何使用它？

https://mui.com/styles/basics/ ⚠️ @mui/styles 是 MUI 的遗留样式解决方案。它依赖于 JSS 作为样式解决方案，不再在 @mui/material 中使用，在 v5 中已弃用。如果您不想在您的包中同时包含 emotion 和 JSS，请参考 @mui/system 文档，这是推荐的替代方法。

它说了一些关于@mui/system的事情，但我不明白ui。

这是我的旧代码。它应该改变这一切吗？

const drawerWidth = 200; //240

const useStyles = makeStyles(() => {
return {
page: {
  background: "#f1f1f1",
  width: "100%",
  // padding: useTheme().spacing(3),
},
// drawer: {
//   width: drawerWidth,
//   backgroundColor: "red",
// },
drawerPaper: {
  width: drawerWidth,
},
root: {
  display: "flex",
},

Answer 1

如果您要随时间更新 MUI 框架，您应该 and/or 在严格模式下使用 React 18。请参阅 here

@mui/styles is not compatible with React.StrictMode or React 18.

此外，他们说新方法在性能和大小方面更好（但我还没有测试过），但请在此处查看一些性能测量结果 MUI System

我目前处于同样的情况，我将研究如何将所有内容迁移到新的 MUI 系统，并 Emotion. See here 以获取有关如何使用 Emotion 从 makeStyles 迁移到 MUI v5 的示例。

material ui usestyles 已弃用 - 我需要更改代码吗

material ui usestyles deprecated - do i need to change code

reactjs

material-ui

usestyles