What is the alternative of makeStyles for Material UI v.5

We Are Going To Discuss About What is the alternative of makeStyles for Material UI v.5. So lets Start this Javascript Article.

What is the alternative of makeStyles for Material UI v.5

How to solve What is the alternative of makeStyles for Material UI v.5

You can still use the makeStyles utils as what you’re using, but in material v5 if you love to do it you need to install one more package @mui/styles and
import { makeStyles } from '@mui/styles';
https://mui.com/guides/migration-v4/#mui-material-styles
The makeStyles JSS utility is no longer exported from @mui/material/styles. You can use @mui/styles/makeStyles instead.
Also, you need to add tab and purple to createTheme if you need them
const theme = createTheme({ typography: { tab: { fontSize: 20, }, }, palette: { common: { purple: 'purple', }, }, })

What is the alternative of makeStyles for Material UI v.5

You can still use the makeStyles utils as what you’re using, but in material v5 if you love to do it you need to install one more package @mui/styles and
import { makeStyles } from '@mui/styles';
https://mui.com/guides/migration-v4/#mui-material-styles
The makeStyles JSS utility is no longer exported from @mui/material/styles. You can use @mui/styles/makeStyles instead.
Also, you need to add tab and purple to createTheme if you need them
const theme = createTheme({ typography: { tab: { fontSize: 20, }, }, palette: { common: { purple: 'purple', }, }, })

Solution 1

You can still use the makeStyles utils as what you’re using, but in material v5 if you love to do it you need to install one more package @mui/styles and

import { makeStyles } from '@mui/styles';

https://mui.com/guides/migration-v4/#mui-material-styles

The makeStyles JSS utility is no longer exported from @mui/material/styles. You can use @mui/styles/makeStyles instead.

Also, you need to add tab and purple to createTheme if you need them

const theme = createTheme({
  typography: {
    tab: {
      fontSize: 20,
    },
  },
  palette: {
    common: {
      purple: 'purple',
    },
  },
})

Original Author Fred Nguyen Of This Content

Solution 2

Based on documentation:

@mui/styles is the legacy styling solution for MUI. It is deprecated in v5. It depends on JSS as a styling solution, which is not used in the @mui/material anymore.

You can use the-sx-prop or styled

Original Author Reza Of This Content

Solution 3

so what i understood from this question is that you want to add custom classes to the material-ui components. and makestyles is giving you error about theme.. you can resolve this by providing default theme to makestyles. you can use ThemeProvider to do that.. all you’ve to do is create a default theme with createTheme() then use that in ThemeProvider to pass it to all components in tree below ThemeProvider.. just use ThemeProvider to wrap your root component and that will provide default theme to each makeStyles that are currently in use..

import { makeStyles } from '@mui/styles';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme();

 const useStyles = makeStyles((theme) => (
 root : {
   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 <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
 }

Original Author AbHisheK ThaKur Of This Content

Solution 4

import * as React from 'react';
import { StyledEngineProvider } from '@mui/material/styles';

export default function GlobalCssPriority() {
  return (
    <StyledEngineProvider injectFirst>
      {/* Your component tree. Now you can override MUI's styles. */}
    </StyledEngineProvider>
  );
}

You need to use provider on main file to get default styles first.
Visit here Material UI injections!

Original Author Goksel Yesiller Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment