Looking at the code snippet below, my attempt to style an MUI Stack component within an MUI Dialog component seems to be falling short. The Stack styles are not being applied as expected:
const CustomDialog = styled(Dialog)(({ theme }) => ({
'& .MuiDialog-paper': {
backgroundColor: theme.palette.error.light,
color: theme.palette.background.default,
textAlign: 'center',
},
'& .MuiDialogContent-root': {
marginTop: 2,
marginBottom: 2,
},
'& .MuiStack-root': {
direction: 'row',
spacing: 1,
padding: 1,
},
'& .MuiButton-root': {
':first-of-type': {
color: theme.palette.error.light,
backgroundColor: theme.palette.background.default,
':hover': {
backgroundColor: theme.palette.error.dark
}
},
':last-of-type': {
backgroundColor: theme.palette.success.main,
':hover': {
backgroundColor: theme.palette.success.dark
}
}
}
}));
Now, see the CustomDialog in action:
<CustomDialog>
<DialogTitle>
...
</DialogTitle>
<DialogContent>
...
</DialogContent>
<Stack>
<Button>
...
</Button>
<Button>
...
</Button>
</Stack>
</CustomDialog>;
The intention was for the Stack to display the buttons side by side, but currently they are stacked vertically instead.