Como puede ver a continuación, estoy tratando de diseñar un componente MUI Stack dentro de un componente MUI Dialog, pero los estilos Stack no se aplican en mi código:
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 } } } }));Y aquí está el CustomDialog en acción:
<CustomDialog> <DialogTitle> ... </DialogTitle> <DialogContent> ... </DialogContent> <Stack> <Button> ... </Button> <Button> ... </Button> </Stack> </CustomDialog>;La pila debería estar alineando los botones uno al lado del otro, pero todavía están uno encima del otro verticalmente
En la pila, puede agregar un accesorio de dirección para configurarlo de la manera que desee, proporciono el ejemplo de código que puede probar.
<Stack direction="row"> <Button> ... </Button> <Button> ... </Button> </Stack>