diff --git a/docs/src/pages.ts b/docs/src/pages.ts index 0070883c65303d..12843eac4b7995 100644 --- a/docs/src/pages.ts +++ b/docs/src/pages.ts @@ -292,6 +292,7 @@ const pages: readonly MuiPage[] = [ }, { pathname: '/styles', + title: 'Styles (legacy)', children: [ { pathname: '/styles/basics' }, { pathname: '/styles/advanced' }, diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md index ee6f2a2030d58a..7c8f61c307c9de 100644 --- a/docs/src/pages/styles/basics/basics.md +++ b/docs/src/pages/styles/basics/basics.md @@ -1,8 +1,13 @@ # @material-ui/styles -

You can use Material-UI's styling solution in your app, whether or not you are using Material-UI components.

+

The legacy styling solution of Material-UI.

-> **Note**: `@material-ui/styles` is the _**legacy**_ styling solution for Material-UI. It is deprecated in v5. It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@material-ui/core` anymore. If you don't want to have both emotion & JSS in your bundle, please refer to the [`@material-ui/system`](/system/basics/) documentation which is the recommended alternative. +> ⚠️ `@material-ui/styles` is the _**legacy**_ styling solution for Material-UI. +> It is deprecated in v5. +> It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@material-ui/core` anymore. +> If you don't want to have both emotion & JSS in your bundle, please refer to the [`@material-ui/system`](/system/basics/) documentation which is the recommended alternative. + +> ⚠️ `@material-ui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18. Material-UI aims to provide a strong foundation for building dynamic UIs. For the sake of simplicity, **we expose the styling solution used in Material-UI components** as the `@material-ui/styles` package. diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 69cf665da92fda..840063aa745e2a 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -315,7 +315,7 @@ "/guides/content-security-policy": "Content Security Policy", "/guides/right-to-left": "Right-to-left", "/guides/flow": "Flow", - "/styles": "Styles", + "/styles": "Styles (legacy)", "/styles/basics": "Basics", "/styles/advanced": "Advanced", "https://material-ui.com/store/": "Premium themes",