Closed Mohammed-Mounir closed 2 years ago
Hi @Mohammed-Mounir,
Thanks for reaching out,
You aren't showing me the rellevent bit of your code,
When you get classes
as an empty record it's probably that you are calling makeStyles
wrong. Show me that.
PS: You can copy paste image and video on GitHub issues, no need to host them somewhere
Sorry, this is the third or fourth time I'm trying to migrate to MUI v5, each time I get new issue lol
Anyway, in this project each component folder is divided into two files, the component file and style file, the component file is typescript, and the style file is javascript, at the beginning I thought that could be the problem, but then I remembered that other components are working fine, so I'm not sure why I have this issue
Here is the style.js file
import { makeStyles } from 'tss-react/mui';
export default makeStyles()(
({ spacing, shadows, shape, palette, breakpoints, mixins, transitions }) => ({
root: {
boxShadow: shadows[1],
borderRadius: shape.borderRadius,
overflow: 'hidden',
width: '100%',
},
expPanel: {
boxShadow: 'none',
'&:not(:last-child)': {
borderBottom: 0,
},
'&:before': {
display: 'none',
},
'&.Mui-expanded': {
margin: 'auto',
},
},
expPanelSummary: {
backgroundColor: 'rgb(239 239 244)',
minHeight: 56,
borderBottom: 'none',
'&.Mui-expanded': {
borderBottom: '1px solid rgba(0, 0, 0, .125)',
},
'& .MuiExpansionPanelSummary-content': {
alignItems: 'center',
margin: spacing(1.5, 0),
[breakpoints.up('sm')]: {
margin: spacing(2, 0),
},
},
'& p': {
fontWeight: 500,
},
},
expPanelDetails: {
padding: 0,
display: 'block',
},
brandIcon: {
minWidth: 'unset',
color: palette.text.primary,
marginRight: spacing(1),
fontSize: '1.9rem',
[breakpoints.up('sm')]: {
fontSize: '2.2rem',
},
[breakpoints.up('md')]: {
marginRight: spacing(2),
fontSize: '2.4rem',
},
'& .MuiIcon-root': {
fontSize: 'inherit',
},
},
list: {
'&::-webkit-scrollbar-track': {
backgroundColor: '#fff',
},
backgroundColor: 'rgba(0, 0, 25, .05)',
padding: spacing(1, 0),
maxHeight: 240,
transition: 'max-height 600ms',
transitionTimingFunction: transitions.easing.easeInOut,
overflow: 'auto',
...mixins.scrollbar,
},
screensExpanded: {
paddingRight: 0,
maxHeight: 500,
'&::-webkit-scrollbar': {
width: 0,
},
},
screensList: {
backgroundColor: '#fff',
boxShadow:
'inset 0px 1px 1px -2px rgba(0,0,0,0.2), inset 0px 1px 1px 0px rgba(0,0,0,0.14), inset 0px 1px 3px 0px rgba(0,0,0,0.12)',
},
screenIcon: {
minWidth: spacing(4),
justifyContent: 'center',
marginRight: spacing(1.5),
cursor: 'pointer',
'&:hover > div': {
transform: 'scale(1.3)',
},
'& > div': {
transitionProperty: 'transform',
transitionDuration: transitions.duration.standard,
transitionTimingFunction: transitions.easing.easeInOut,
},
},
mapsPinBtn: {
margin: spacing(0, 1),
padding: spacing(0.5),
'&.Mui-disabled svg *': {
fill: palette.action.disabled,
},
'& svg': {
fontSize: '2.4rem',
height: '1em',
width: '1em',
},
},
listItemText: {
'& .MuiListItemText-primary': {
fontWeight: 500,
},
'& .MuiListItemText-secondary': {
marginRight: spacing(0.75),
display: 'flex',
alignItems: 'center',
'& .MuiSvgIcon-root': {
fontSize: '1.4rem',
marginRight: 4,
},
},
},
screensBtn: {
display: 'inline-flex',
minWidth: 0,
[breakpoints.up('sm')]: {
'&.MuiButton-outlinedSizeSmall': {
fontSize: '1.37rem',
},
marginRight: spacing(1),
minWidth: 64,
},
'& .MuiButton-endIcon > svg': {
transitionProperty: 'transform',
transitionDuration: transitions.duration.shorter,
transitionTimingFunction: transitions.easing.easeInOut,
},
},
expanded: {
transform: 'rotate(180deg)',
},
selectButton: {
padding: spacing(1),
marginRight: spacing(-1),
'&.Mui-disabled .MuiSvgIcon-root': {
color: palette.action.disabled,
},
},
}),
);
the component lines are about 380 so I didn't include it.
But I'm importing makeStyles from the style file
import useStyles from './styles';
then:
const { classes } = useStyles();
BTW thanks for your fast reply!
Hey, just passing by ! Did you use a custom property transition, in you're MUI theme ?
You mean accessing the transitions property like this, then yes:
and btw when I comment out the line like the image, it works fine. I don't know how I forgot to mention that.
Could you pass the configuration of your theme mui ? I believe there is type script missing ... because it seems to works fine for me if I comment this two line :
screenIcon: {
minWidth: spacing(4),
justifyContent: 'center',
marginRight: spacing(1.5),
cursor: 'pointer',
'&:hover > div': {
transform: 'scale(1.3)',
},
'& > div': {
transitionProperty: 'transform',
// transitionDuration: transitions.duration.standard,
transitionTimingFunction: transitions.easing.easeInOut,
},
},
and
screensBtn: {
display: 'inline-flex',
minWidth: 0,
[breakpoints.up('sm')]: {
'&.MuiButton-outlinedSizeSmall': {
fontSize: '1.37rem',
},
marginRight: spacing(1),
minWidth: 64,
},
'& .MuiButton-endIcon > svg': {
transitionProperty: 'transform',
// transitionDuration: transitions.duration.shorter,
transitionTimingFunction: transitions.easing.easeInOut,
},
},
I actually have issues with custom theming and MUI v5,
import { createTheme, responsiveFontSizes } from '@mui/material/styles';
import palette from './palette.theme';
import typography from './typography.theme';
import generic from './generic.theme';
import mixins from './mixins.theme';
// Change the default props of a Material-UI component
import muiDefaultProps from './muiDefaultProps.theme';
// Change every single style injected by Material-UI in an Mui component
import muiStylesOverrides from './muiStylesOverrides.theme';
const theme = createTheme({
palette,
typography,
mixins,
props: muiDefaultProps,
overrides: {
...muiStylesOverrides,
MuiCssBaseline: {
'@global': generic,
},
},
shape: {
borderRadius: 5.87,
},
zIndex: {
appBar: 1200,
drawer: 1100,
},
});
export default responsiveFontSizes(theme);
@Mohammed-Mounir the problem is related to transitionDuration
.
Typings says it should be:
But you give it a number.
I don't know, maybe it works if you want you can tell typescript you know what you are doing by doing:
- transitionDuration: transitions.duration.standard
+ transitionDuration: transitions.duration.standard as any
- transitionDuration: transitions.duration.shorter
+ transitionDuration: transitions.duration.shorter as any
Best,
Okay, Thanks
Please give the project a star if you are using it in prod
Done
BTW do you know a better guide for mui 5 migration?
Hello
I'm trying to Migrate from MUI v4 to MUI v5, I'm following those guides:
https://mui.com/material-ui/migration/migration-v4/ https://mui.com/material-ui/migration/migrating-from-jss/#2-use-tss-react
Currently I have issue regarding classes, On some components the classes type I'm getting is Record<never, string> and when I try to use it, I'm getting Property 'X' does not exist on type 'Record<never, string>',
and on other components the classes type is correct.
App.js