[docs] Why import from `@mui/material/styles`, not directly from `@mui/material`?

[thorn0]

Duplicates

• [X] I have searched the existing issues

Related page

https://mui.com/material-ui/customization/theming/

Kind of issue

Missing information

Issue description

In the docs. it's prescribed to import style-related functions and types from @mui/material/styles, but I noticed the same things can be imported directly from the root of the @mui/material package. I wonder why there are two ways to import them, whether there is any difference between the two, and why /styles is the recommended way.

Context 🔦

No response

[AmarTrebinjac]

Explained in the documentation https://mui.com/material-ui/guides/minimizing-bundle-size/#development-environment.

[thorn0]

@AmarTrebinjac That explanation seems to be only about importing components. It can be applied to style-related things too, but there seems to be an inconsistency in that case. The explanation basically says: use deep imports if your setup doesn't support tree shaking or use top-level imports otherwise. So doc pages for each component show the two ways to import it. However, it's not the case for style-related functions`, for which only the deep import is recommended throughout the docs without any explanation.

[siriwatknp]

However, it's not the case for style-related functions`, for which only the deep import is recommended throughout the docs without any explanation.

It is the same as a component import. The 2nd level import is used across the docs to give developers only what they need when they copy the code or open a Sandbox. @oliviertassinari might have a detailed explanation.

[oliviertassinari]

That explanation seems to be only about importing components

@thorn0 This docs is about any JavaScript module exported by any of our @mui/ packages. So https://github.com/mui/material-ui/issues/35463#issuecomment-1349782238's is correct.

[thorn0]

Okay, thanks for the explanation. Feel free to close the issue if it's unactionable. Turns out I missed this sentence from here:

MUI exposes its full API on the top-level @mui imports.

What doesn't look quite right to me is that this "Minimizing bundle size" page is (or at least looks like) an optimization guide. Such explanations belong in the API reference. People don't read optimization guides when what they want is to understand the API.