Open vinifmor opened 2 weeks ago
Hey, thanks for opening the issue! Could you provide a minimal reproduction? It helps us troubleshoot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point.
I've found out the cause... this example I've shared is a simplified version of the real production code. What changes is that those buttons are actually custom buttons defined with withStyles
. e.g:
import { withStyles } from 'tss-react/mui'
export const PrimaryButton = withStyles(Button, theme => ({
root: {
color: white,
backgroundColor: purple,
'&:hover': {
backgroundColor: darken(purple, 0.10)
}
}
}))
The margin defined by the <Grid>
container for its direct children (those custom buttons) works in v4, but doesn't work in v5. If I replace a custom button by a default <Button>
, the margin works in v5. I am missing any new property or configuration that should also be added when calling withStyles
?
Steps to reproduce
I have to migrate an old Mui code from v4 to v5. There are some old CSS rules for direct children (
& > *
) that are not being applied. I'll provide some summarized codes below fore before/after the migration (v4 -> v5
):Before:
After (the the buttons' margin are not working):
The current workaround I've found is to provide the margin directly to the buttons through
sx={{ margin: theme => theme.spacing(1) }}
:Is this migrated code right ?
Current behavior
Margins not applied in v5 when the parent rule CSS
& > *
is definedExpected behavior
Margins should be applied
Context
Migration from v4 to v5
Your environment
Search keywords: migration