Open SoulDancer27 opened 2 years ago
It is on the documentation:
"The makeStyles JSS utility is no longer exported from @mui/material/styles. You can use @mui/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 @mui/material, it's recommended that you use the ThemeProvider component from @mui/material/styles instead."
Source: Migration from v4 to v5.
If that doesn't solve try using one of this aproaches from Stack Overflow.
You can still use JSS, you just need to update the imports to point directly to @mui/styles
. You could also update them to use styled()
or sx
, or tss-react
which is a new library that has the makeStyles
API but works with emotion (watch out for the tomorrow release, that will include a codemod for migrating from @mui/styles to tss-react). https://mui.com/material-ui/guides/migration-v4 contains all info that you may need for the migration.
@mnajdova Which should be the right approach to migrate the theme engine? I have over a hundred components in my project and it seems styled()
and sx
(the 2 official solutions provided by MUI) all follow the pattern that doesn't seem to allow recyclable CSS classes. I am not sure if I want to use another 3rd-party option like tss-react
For example, if I have this piece of code:
const useStyles = makeStyles({
class1: ....
})
const Component = () => {
const classes = useStyles()
return (
<>
<div className={classes.class1}></div>
<span className={classes.class1}></span>
</>
)
}
I'm not a fan of using styled()
because it will create a lot of custom components in React Dev tools, and the span
and div
in the above example are 2 different, unrelated components that happen to share a CSS class. This way of writing where several components share the same CSS class is similar to how you write a native CSS, JS and HTML web app without any 3rd party framework or styling library. How can I use sx
to replace makeStyles in the old code?
And I would like to ask if using sx
will cause your component to have too much inline styling, which can make a big component much more verbose?
I suppose this can be used as a reference? https://github.com/mui/material-ui/issues/26571
But this leads to another question from me: I'm leaning toward tss-react
due to the heavy reliance of my project on makeStyles
however I wonder if this will still work with MUI v6 which I have recently heard of?
@allicanseenow facing the same problem. Have you found a solution for this?
In the end, I use tss-react.
sx makes the jsx very disorganized and verbose, and it requires just way too many major changes for big projects. styled is even worse as it will create a lot of boilerplate components in your react tree.
tss-react faces none of these issues
I'm sorry, that's kind of a novice question. I'm currently transferring from material-ui v4 to mui v5 and I used to have a lot of makeStyles and jss styling in the code. I would like to ask what is the most appropriate way to replace makeStyles for creating classes based on theme variable values. I have code like this:
` const useStyles = makeStyles((theme) => ({
box: { marginTop: theme.spacing(0.5), marginLeft: theme.spacing(-2.5), },
table: { maxHeight: '50vh', overflow: 'auto', maxWidth:
calc(100vw-${theme.spacing(5)})
, marginRight: theme.spacing(2.5), }, tableCell: { padding:${theme.spacing(0.5)} ${theme.spacing(1)}
},},
}, } )`
If possible, I would like to use a kind of jss solution and not pure css. I know about styled() approach, but wanted to ask if there are more appropriate ways of styling components with classes?
Thanks in advance :)