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