From c5e041e5ec412957e8e592226d443b1fce68aeb7 Mon Sep 17 00:00:00 2001 From: Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 9 Oct 2024 07:20:03 -0700 Subject: [PATCH 1/2] [docs] Clarify suggestions to use `@mui/styles` in v5 migration docs (#44049) --- .../related-projects/related-projects.md | 4 --- .../migration/migration-v4/migration-v4.md | 2 +- .../migration-v4/v5-style-changes.md | 25 +++++++++++-------- packages/mui-styles/README.md | 2 +- 4 files changed, 17 insertions(+), 16 deletions(-) diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md index af8c6a96a0d31a..5a7a1e2b9cd323 100644 --- a/docs/data/material/discover-more/related-projects/related-projects.md +++ b/docs/data/material/discover-more/related-projects/related-projects.md @@ -12,10 +12,6 @@ Feel free to submit a pull request! - [UXPin](https://www.uxpin.com/merge/mui-library): A large UI kit of Material UI components. It renders the components in a web runtime and uses the same React implementation as your production environment. -## IDE tools - -- [eslint-plugin-material-ui-unused-classes](https://github.com/jens-ox/eslint-plugin-material-ui-unused-classes): ESLint plugin to detect unused styling classes with `@mui/styles`. - ## Theming - [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material UI applications that features live previewing. diff --git a/docs/data/material/migration/migration-v4/migration-v4.md b/docs/data/material/migration/migration-v4/migration-v4.md index b50114c2570c31..047c42e43ea9f8 100644 --- a/docs/data/material/migration/migration-v4/migration-v4.md +++ b/docs/data/material/migration/migration-v4/migration-v4.md @@ -114,7 +114,7 @@ Make sure that your application is still running without errors, and commit the Before upgrading to v5, please make sure that `ThemeProvider` is defined at the root of your application and in tests—even if you are using the default theme—and `useStyles` is _not_ called before `ThemeProvider`. -Eventually you may want to [migrate from JSS to Emotion](/material-ui/migration/migrating-from-jss/), but in the meantime you can continue to use JSS with the `@mui/styles` package. +Eventually you will want to [migrate from JSS to Emotion](/material-ui/migration/migrating-from-jss/), but in the meantime you can continue to use the older JSS-based utilities with the deprecated `@mui/styles` package. This package requires `ThemeProvider`. The root of your application should look something like this: diff --git a/docs/data/material/migration/migration-v4/v5-style-changes.md b/docs/data/material/migration/migration-v4/v5-style-changes.md index a7b50d3e9c741f..f911d0554cb063 100644 --- a/docs/data/material/migration/migration-v4/v5-style-changes.md +++ b/docs/data/material/migration/migration-v4/v5-style-changes.md @@ -536,7 +536,8 @@ The `createStyles` function from `@mui/material/styles` was moved to the one exp ### ✅ Update createGenerateClassName import -The `createGenerateClassName` function is no longer exported from `@mui/material/styles`. You should import it directly from `@mui/styles`. +The `createGenerateClassName` function is no longer exported from `@mui/material/styles`. +You can import it from the deprecated `@mui/styles` package if you need to continue using it. ```diff -import { createGenerateClassName } from '@mui/material/styles'; @@ -568,7 +569,8 @@ The `MuiThemeProvider` component is no longer exported from `@mui/material/style ### ✅ Update jssPreset import -The `jssPreset` object is no longer exported from `@mui/material/styles`. You should import it directly from `@mui/styles`. +The `jssPreset` object is no longer exported from `@mui/material/styles`. +You can import it from the deprecated `@mui/styles` package if you need to continue using it. ```diff -import { jssPreset } from '@mui/material/styles'; @@ -577,8 +579,8 @@ The `jssPreset` object is no longer exported from `@mui/material/styles`. You sh ### ✅ Update `makeStyles` import -The `makeStyles` JSS utility is no longer exported from `@mui/material/styles`. -You can use `@mui/styles/makeStyles` instead. +Since Material UI v5 doesn't use JSS, the JSS-based `makeStyles` utility is no longer exported by `@mui/material/styles`. +While migrating your app away from JSS, you can temporarily import this deprecated utility from `@mui/styles/makeStyles` before refactoring your components further. Make sure to add a `ThemeProvider` at the root of your application, as the `defaultTheme` is no longer available. @@ -607,7 +609,8 @@ If you are using this utility together with `@mui/material`, it's recommended th ### ✅ Update ServerStyleSheets import -The `ServerStyleSheets` component is no longer exported from `@mui/material/styles`. You should import it directly from `@mui/styles`. +The `ServerStyleSheets` component is no longer exported from `@mui/material/styles`. +You can import it from the deprecated `@mui/styles` package if you need to continue using it. ```diff -import { ServerStyleSheets } from '@mui/material/styles'; @@ -616,7 +619,8 @@ The `ServerStyleSheets` component is no longer exported from `@mui/material/styl ### styled -The `styled` JSS utility is no longer exported from `@mui/material/styles`. You can use the one exported from `@mui/styles` instead. +Since Material UI v5 doesn't use JSS, the JSS-based `styled` utility exported by `@mui/material/styles` has been replaced with an equivalent Emotion-based utility that's not backwards compatible. +While migrating your app away from JSS, you can temporarily import the JSS-based utility from the deprecated `@mui/styles` package before refactoring your components further. Make sure to add a `ThemeProvider` at the root of your application, as the `defaultTheme` is no longer available. @@ -638,7 +642,8 @@ If you are using this utility together with `@mui/material`, it's recommended yo ### ✅ Update StylesProvider import -The `StylesProvider` component is no longer exported from `@mui/material/styles`. You should import it directly from `@mui/styles`. +The `StylesProvider` component is no longer exported from `@mui/material/styles`. +You can import it from the deprecated `@mui/styles` package if you need to continue using it. ```diff -import { StylesProvider } from '@mui/material/styles'; @@ -648,7 +653,7 @@ The `StylesProvider` component is no longer exported from `@mui/material/styles` ### ✅ Update useThemeVariants import The `useThemeVariants` hook is no longer exported from `@mui/material/styles`. -You should import it directly from `@mui/styles`. +You can import it from the deprecated `@mui/styles` package if you need to continue using it. ```diff -import { useThemeVariants } from '@mui/material/styles'; @@ -657,8 +662,8 @@ You should import it directly from `@mui/styles`. ### ✅ Update withStyles import -The `withStyles` JSS utility is no longer exported from `@mui/material/styles`. -You can use `@mui/styles/withStyles` instead. +Since Material UI v5 doesn't use JSS, the JSS-based `withStyles` utility is no longer exported by `@mui/material/styles`. +While migrating your app away from JSS, you can temporarily import this deprecated utility from `@mui/styles/withStyles` before refactoring your components further. Make sure to add a `ThemeProvider` at the root of your application, as the `defaultTheme` is no longer available. diff --git a/packages/mui-styles/README.md b/packages/mui-styles/README.md index 93587d0f4a587a..36f17bd6e44eff 100644 --- a/packages/mui-styles/README.md +++ b/packages/mui-styles/README.md @@ -1,6 +1,6 @@ # @mui/styles -You can leverage our styling solution, even if you are not using our components. +The legacy styling solution for Material UI, now deprecated and not recommended for use. ## Installation From abddf2a721fdba29c9a247259f3df1620ef0fab0 Mon Sep 17 00:00:00 2001 From: Raffaella Luzi Stoutland <136349774+rluzists1@users.noreply.github.com> Date: Wed, 9 Oct 2024 21:52:10 +0200 Subject: [PATCH 2/2] [website] Add Views4You as a Backlink Gold sponsor (#44051) Co-authored-by: zanivan --- README.md | 2 ++ docs/data/material/discover-more/backers/backers.md | 1 + docs/src/components/home/GoldSponsors.tsx | 5 +++++ 3 files changed, 8 insertions(+) diff --git a/README.md b/README.md index e459e81c39db0a..9d5b52066cca0b 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,8 @@ via [Open Collective](https://opencollective.com/mui-org) or via [Patreon](http   twicsy.comTwicsy   + views4you.comViews4You +  

Gold sponsors are those who have pledged \$500/month or more to MUI. diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md index d21bf76d94f6f9..a06c3203548a7e 100644 --- a/docs/data/material/discover-more/backers/backers.md +++ b/docs/data/material/discover-more/backers/backers.md @@ -39,6 +39,7 @@ For example, it could be because the service breaks another service's Terms of s goread.ioGoread.io buzzoid.comBuzzoid twicsy.comTwicsy + views4you.comViews4You

Gold sponsors are those who've pledged \$500/month or more to the MUI organization. [Tier benefits](#gold). diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx index 0644e7f76956d4..d4191312cdfb26 100644 --- a/docs/src/components/home/GoldSponsors.tsx +++ b/docs/src/components/home/GoldSponsors.tsx @@ -87,6 +87,11 @@ const BACKLINKs = [ description: 'Instant delivery Instagram followers.', href: 'https://twicsy.com/?utm_source=mui.com&utm_medium=referral&utm_content=homepage', }, + { + name: 'Views4You', + description: 'Social media growth services.', + href: 'https://views4you.com/?utm_source=mui.com&utm_medium=referral&utm_content=homepage', + }, ]; export default function GoldSponsors() {