[core] Remove `makeStyles` from `@material-ui/core` #26382

mnajdova · 2021-05-19T16:36:07Z

BREAKING CHANGE

The makeStyles JSS utility is no longer exported from @material-ui/core/styles. You can use @material-ui/styles/makeStyles instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, it's recommended you use the ThemeProvider component from @material-ui/core/styles instead.

-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';

+const theme = createTheme();
 const useStyles = makeStyles((theme) => ({
   background: theme.palette.primary.main,
 }));
 function Component() {
   const classes = useStyles();
   return <div className={classes.root} />
 }

 // In the root of your app
 function App(props) {
-  return <Component />;
+  return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
 }

mui-pr-bot · 2021-05-19T16:38:12Z

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 95bba03

mnajdova · 2021-05-19T21:21:27Z

@dtassone we have this regression - https://www.argos-ci.com/mui-org/material-ui/builds/3599 after upgrading to @material-ui/[email protected], is it expected? I assume is because of the new sorting icon. Maybe we should increase the width of the table in this example.

mnajdova · 2021-05-19T21:22:00Z

@eps1lon @oliviertassinari what shall we do with notistack still using makeStyles? Our deploy is failing - https://app.netlify.com/sites/material-ui/deploys/60a5471966f35f0007ce0549

mnajdova · 2021-05-19T21:28:18Z

docs/package.json

@@ -31,7 +31,7 @@
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@material-ui/core": "5.0.0-alpha.34",
-    "@material-ui/data-grid": "^4.0.0-alpha.21",
+    "@material-ui/data-grid": "^4.0.0-alpha.29",


This is needed, as this version does not use makeStyles from @material-ui/core/styles anymore.

mnajdova · 2021-05-19T21:28:29Z

docs/src/pages/components/tables/DataTable.js

@@ -18,7 +18,9 @@ const columns = [
    sortable: false,
    width: 160,
    valueGetter: (params) =>
-      `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`,
+      `${params.getValue(params.id, 'firstName') || ''} ${


This was a breaking change.

mnajdova · 2021-05-19T21:28:53Z

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -1617,8 +1642,6 @@ As the core components use emotion as a styled engine, the props used by emotion
   }
  ```

-Note: If you would like to move


Cleanup, was some leftover forgotten

oliviertassinari · 2021-05-19T21:34:55Z

what shall we do with notistack still using makeStyles? Our deploy is failing

@mnajdova

Option 1. We could remove notistack from the docs. This would give us a good incentive to prioritize [Snackbar] Add stacking support/display several #1824. This is both interesting to have a built-in feature as well as has a good potential for an unstyled/headless version.
Option 2. We could configure Babel/webpack to run notistack with core v4.
Option 3. We could push Support MUI v5 alpha iamhosseindhv/notistack#333 one step forward with the same approach used in the data grid.

mnajdova · 2021-05-19T22:04:54Z

Option 1. We could remove notistack from the docs. This would give us a good incentive to prioritize [Snackbar] Add stacking support/display several #1824. This is both interesting to have a built-in feature as well as has a good potential for an unstyled/headless version.

Option 2. We could configure Babel/webpack to run notistack with core v4.

Option 3. We could push Support MUI v5 alpha iamhosseindhv/notistack#333 one step forward with the same approach used in the data grid.

Happy to go with whatever is the best. Option 1 seems to allow us to move fastest, but I am ok with any of the options. We could disable the example now and re-enable once notistack is v5 compatible too.

dtassone · 2021-05-20T09:49:42Z

@dtassone we have this regression - https://www.argos-ci.com/mui-org/material-ui/builds/3599 after upgrading to @material-ui/[email protected], is it expected? I assume is because of the new sorting icon. Maybe we should increase the width of the table in this example.

Yes but looking at it now, I don't think it's great. We have largely enough space to render the title, it looks empty, and you wonder why the col title is not there or is cut as in the image below.

mnajdova · 2021-05-20T10:07:07Z

Yes but looking at it now, I don't think it's great. We have largely enough space to render the title, it looks empty, and you wonder why the col title is not there or is cut as in the image below.

Agree, maybe would be better if the toolbar (the icons) is rendered as some popover

mnajdova · 2021-05-20T10:45:13Z

@dtassone I've increased the width of the columns by 20, it looks better now:

We can update the example with the next release once this is fixed.

oliviertassinari

Looks good

docs/src/pages/components/snackbars/snackbars.md

docs/src/pages/components/tables/DataTable.tsx

eps1lon · 2021-05-20T11:41:53Z

@eps1lon @oliviertassinari what shall we do with notistack still using makeStyles?

Ideally just rewrite an import if that's possible. It's a good test whether the migration story is viable.

mnajdova · 2021-05-20T11:45:20Z

Ideally just rewrite an import if that's possible. It's a good test whether the migration story is viable.

Rewrite import + add defaultTheme is the way to go. I will create a PR there, but would not block this by the changes there. Added Todo to enable it once this is done.

Co-authored-by: Olivier Tassinari <[email protected]>

eps1lon · 2021-05-20T12:44:49Z

add defaultTheme is the way to go

Where does @material-ui/styles get the theme from? We can add a their provider to our docs as an interim solution.

mnajdova · 2021-05-20T12:53:37Z

Where does @material-ui/styles get the theme from? We can add a their provider to our docs as an interim solution.

I am creating it with createTheme from core. The problem is that in their repo, they are importing makeStyles from @material-ui/core/styles, but that function is removed. The import needs to be changed too.

eps1lon · 2021-05-20T13:12:11Z

@material-ui/core/styles, but that function is removed. The import needs to be changed too.

We can rewrite this with babel in our repo. We're already doing a bunch of rewrites:

https://github.com/eps1lon/material-ui/blob/323b76bec7391d7c95954096814d6876a3813c77/docs/next.config.js#L103-L138

So it sounds like we should be able to add the new one for compat if that is all required for migrating

mnajdova · 2021-05-20T13:37:27Z

We can rewrite this with babel in our repo. We're already doing a bunch of rewrites:

https://github.com/eps1lon/material-ui/blob/323b76bec7391d7c95954096814d6876a3813c77/docs/next.config.js#L103-L138

So it sounds like we should be able to add the new one for compat if that is all required for migrating

How can we do this, if only some of the imports from a package should be changed, for example:

-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';

// but these should still be imported from @material-ui/core/styles
import { Theme, ThemProvider } from '@material-ui/core/styles';

eps1lon · 2021-05-20T14:23:37Z

sigh yeah, nevermind. The migration story is just all over the place unfortunately.

mnajdova added 2 commits May 19, 2021 18:34

init

dc3586f

new line

5fa869e

mnajdova marked this pull request as draft May 19, 2021 16:37

mnajdova added 3 commits May 19, 2021 18:41

yarn.lock

7cd6406

fix

bb94aaa

prettier

5416fbb

mnajdova marked this pull request as ready for review May 19, 2021 21:27

mnajdova commented May 19, 2021

View reviewed changes

remove notistack example & Todo

87025fa

dtassone mentioned this pull request May 20, 2021

[DataGrid] Fix Column title UX. The header title is cut and looks empty mui/mui-x#1712

Closed

improve data table example

6b811df

mnajdova requested a review from oliviertassinari May 20, 2021 11:05

oliviertassinari reviewed May 20, 2021

View reviewed changes

docs/src/pages/components/snackbars/snackbars.md Outdated Show resolved Hide resolved

docs/src/pages/components/tables/DataTable.tsx Outdated Show resolved Hide resolved

mnajdova and others added 2 commits May 20, 2021 13:47

revert width changes

bec8c44

Update docs/src/pages/components/snackbars/snackbars.md

67220a0

Co-authored-by: Olivier Tassinari <[email protected]>

mnajdova mentioned this pull request May 20, 2021

Fix support for next version of @material-ui/core iamhosseindhv/notistack#387

Closed

prettier

b587bb9

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 20, 2021

Merge branch 'next' into feat/makeStyles-remove-from-core

95bba03

mnajdova requested a review from oliviertassinari May 21, 2021 13:48

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 21, 2021

oliviertassinari added the breaking change label May 21, 2021

oliviertassinari approved these changes May 21, 2021

View reviewed changes

mnajdova merged commit 2ec7536 into mui:next May 21, 2021

oliviertassinari changed the title ~~[core] Remove makeStyles from @material-ui/core/styles~~ [core] Remove makeStyles from @material-ui/core May 29, 2021

jasonburnell98 mentioned this pull request Jun 4, 2021

[styles] My app have memory leak on browser after using material-ui. #21528

Closed

2 tasks

oliviertassinari added this to the v5-beta milestone Aug 17, 2021

oliviertassinari mentioned this pull request Aug 17, 2021

Deprecation warnings for v5 #22074

Closed

42 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] Remove `makeStyles` from `@material-ui/core` #26382

[core] Remove `makeStyles` from `@material-ui/core` #26382

mnajdova commented May 19, 2021

mui-pr-bot commented May 19, 2021 •

edited

Loading

mnajdova commented May 19, 2021

mnajdova commented May 19, 2021

mnajdova May 19, 2021

mnajdova May 19, 2021

mnajdova May 19, 2021

oliviertassinari commented May 19, 2021 •

edited

Loading

mnajdova commented May 19, 2021

dtassone commented May 20, 2021

mnajdova commented May 20, 2021

mnajdova commented May 20, 2021

oliviertassinari left a comment

eps1lon commented May 20, 2021

mnajdova commented May 20, 2021

eps1lon commented May 20, 2021

mnajdova commented May 20, 2021

eps1lon commented May 20, 2021

mnajdova commented May 20, 2021

eps1lon commented May 20, 2021

[core] Remove makeStyles from @material-ui/core #26382

[core] Remove makeStyles from @material-ui/core #26382

Conversation

mnajdova commented May 19, 2021

mui-pr-bot commented May 19, 2021 • edited Loading

mnajdova commented May 19, 2021

mnajdova commented May 19, 2021

mnajdova May 19, 2021

Choose a reason for hiding this comment

mnajdova May 19, 2021

Choose a reason for hiding this comment

mnajdova May 19, 2021

Choose a reason for hiding this comment

oliviertassinari commented May 19, 2021 • edited Loading

mnajdova commented May 19, 2021

dtassone commented May 20, 2021

mnajdova commented May 20, 2021

mnajdova commented May 20, 2021

oliviertassinari left a comment

Choose a reason for hiding this comment

eps1lon commented May 20, 2021

mnajdova commented May 20, 2021

eps1lon commented May 20, 2021

mnajdova commented May 20, 2021

eps1lon commented May 20, 2021

mnajdova commented May 20, 2021

eps1lon commented May 20, 2021

[core] Remove `makeStyles` from `@material-ui/core` #26382

[core] Remove `makeStyles` from `@material-ui/core` #26382

mui-pr-bot commented May 19, 2021 •

edited

Loading

oliviertassinari commented May 19, 2021 •

edited

Loading