MUI v5 styled from '@mui/system' vs '@mui/material/styles'

Question

there are two ways to import the styled() function. The docs says that the only difference is the default theme that is used. Does anyone know the difference?

Answer 1

According to their docs

You can use the utility coming from the @mui/system package, or if you are using @mui/material, you can import it from @mui/material/styles. The difference is in the default theme that is used (if no theme is available in the React context).

The default theme from @mui/system is very minimal. The default theme from @mui/material/styles is an enhanced version of the default theme from @mui/system that comes with a lot of ready to use predefined properties. If you are interested in a side by side comparison of the two have a look at the codesanbox I made.