As you can see below, I am trying to style an MUI Stack component within an MUI Dialog component, but the Stack styles are not being applied in my code:
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
}
}
}
}));
And here is the CustomDialog in action:
<CustomDialog>
<DialogTitle>
...
</DialogTitle>
<DialogContent>
...
</DialogContent>
<Stack>
<Button>
...
</Button>
<Button>
...
</Button>
</Stack>
</CustomDialog>;
The Stack should be aligning the buttons next to each other, but they are still on top of each other vertically
At the Stack you can add direction prop to setting that the way you want, I provide the code example you can try.
<Stack direction="row">
<Button>
...
</Button>
<Button>
...
</Button>
</Stack>