material ui usestyles deprecated - do i need to change code

Question

I'm a bit confused on material ui v5.5.2 on how to useStyles(). This website says deprecated but if so how do you still use this?

https://mui.com/styles/basics/ ⚠️ @mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.

It says something about @mui/system but don't quite understand.

this is my old code. should it be changing all of this?

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

You should if you're going to update MUI framework over time and/or use React 18 in strict mode. Please see here

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

Moreover they say that the new approach is better in performance and size (but I didn't test that yet), but see some performance measurements here MUI System

I'm currently in the same situation and I'm going to study how to migrate everything to the new MUI system and Emotion. See here for an example on how to migrate from makeStyles to MUI v5 with Emotion.