React - Material UI Grid and useStyles prop issues - reactjs

Question

First time really playing around with materialUI. I've made a grid of cards and sorted out most of the styling within the same component, so I wanted to move all the useStyles styling to a styling file.
After figuring out how to do so, on reload I could see that no backgroundColor styling across any of the components were rendering, but everything else was.
backgroundColor rendered fine when it was in the same file, and weirdly, it renders once (the other backgroundColours not removed render fine, I mean) if I remove one instance of the color and readd it...but on reload, they're all gone again.
Appreciate some help on this please!
GridStyles.js
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles({
root: {
flexGrow: 1,
marginLeft: '15rem',
marginRight: '15rem',
wordBreak: 'break-all',
whiteSpace: 'unset'
},
containerCard: {
border: 'solid 3px black',
marginRight: '2rem',
marginLeft: '2rem',
marginTop: '3rem',
marginBottom: '5rem',
borderRadius: '8px',
borderLeftStyle: 'dashed',
borderRightStyle: 'dashed',
},
topCard: {
backgroundColor: '#53E9B2',
border: 'none',
boxShadow: 'none',
paddingBottom: '7rem',
position: 'relative'
},
topCardText: {
position: 'absolute',
bottom: 0,
padding: 0,
marginLeft: '2rem'
},
middleCard: {
border: 'solid 2px black',
borderLeftStyle: 'dashed',
borderRightStyle: 'dashed',
backgroundColor: '#53E9B2',
marginRight: '2rem',
marginLeft: '2rem',
marginTop: '1em',
marginBottom: '3rem',
borderRadius: '8px'
},
middleCardText: {
whiteSpace: 'pre-wrap',
color: 'white'
},
bottomCard: {
backgroundColor: '#53E9B2',
border: 'none',
boxShadow: 'none',
paddingBottom: '1rem'
},
bottomCardText: {
color: 'white',
padding: 0,
marginLeft: '2rem'
}
})
export default useStyles
Grid.js
import React from 'react'
import useStyles from './GridStyles'
import {
Grid,
Card,
CardHeader
} from '#material-ui/core/'
const CardGrid = (props) => {
const classes = useStyles(props);
return (
<div className={classes.root}>
<Grid
container
spacing={0}
direction='row'
justifyContent='flex-start'
alignItems='flex-start'
>
{props.cardData.map(elem => (
<Grid
item
xs={4}
sm={4}
md={4}
xl={4}
key={props.cardData.indexOf(elem)}
>
<Card className={classes.containerCard}>
<Card className={classes.topCard}>
<CardHeader className={classes.topCardText} title={elem.name} />
</Card>
<Card className={classes.middleCard}>
<CardHeader
className={classes.middleCardText}
title={`Company Name:\n${elem.company.name}`}
/>
<CardHeader
className={classes.middleCardText}
title={`Company Catchphrase:\n${elem.company.catchPhrase}`}
/>
<CardHeader
className={classes.middleCardText}
title={`Company Bs:\n${elem.company.bs}`}
/>
</Card>
<Card className={classes.bottomCard}>
<CardHeader
className={classes.bottomCardText}
title={`Phone: ${elem.phone}`}
/>
<CardHeader
className={classes.bottomCardText}
title={`Email: ${elem.email}`}
/>
<CardHeader
className={classes.bottomCardText}
title={`Website: ${elem.website}`}
/>
</Card>
</Card>
</Grid>
))}
</Grid>
</div>
)
}
export default CardGrid

Answer 1

Next JS not properly loading Material UI styles until refresh
The accepted answer on this link fixed my problem. Converted the GridStyles page into one const with the styles and nothing else, arrow function with that calls this file with the makeStyles() function reference and it worked.