MUI styled()中嵌套Stack组件样式不生效问题咨询

MUI的styled()完全支持为嵌套组件设置样式，你遇到的Stack样式不生效、按钮无法横向排列问题，是代码写法不符合CSS和MUI的规则导致的，和styled()本身的能力无关。

• 混淆了MUI组件props和CSS属性：direction="row"、spacing={1}是<Stack>组件接收的入参，不是标准CSS属性。这类组件逻辑仅在JSX中直接传参、或通过主题覆盖组件默认props时生效，写在CSS规则中不会被MUI解析，属于无效代码。

  补充说明：原生CSS的direction属性仅用于控制文本的阅读方向（取值为ltr/rtl），和flex布局方向没有关系，写direction: 'row'属于非法CSS值，浏览器会直接忽略该规则。

• 嵌套选择器下的间距简写不生效：MUI的自动间距换算（即写数字自动转theme.spacing(x)）仅作用于当前styled组件的根节点样式，你在嵌套类选择器下写的marginTop: 2、padding: 1这类数字值，会被直接渲染为2px、1px，不会按MUI的8px基准间距换算成你预期的尺寸。
• Stack的布局逻辑本质是CSS：Stack组件默认自带display: flex，横排效果对应CSS属性flex-direction: row，spacing属性对应CSS的gap属性，你没有写这两个正确的CSS规则，自然无法实现按钮横排。

将原styled代码中的对应样式块替换为如下正确写法即可：

const CustomDialog = styled(Dialog)(({ theme }) => ({
    '& .MuiDialog-paper': {
        backgroundColor: theme.palette.error.light,
        color: theme.palette.background.default,
        textAlign: 'center',
    },
    '& .MuiDialogContent-root': {
        marginTop: theme.spacing(2),
        marginBottom: theme.spacing(2),
    },
    '& .MuiStack-root': {
        flexDirection: 'row',
        gap: theme.spacing(1),
        padding: theme.spacing(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
            }
        }
    }
}));

你当前的JSX结构中，<Stack>和<DialogTitle>、<DialogContent>平级放在Dialog组件下，MUI会自动将这类自定义子节点渲染到Paper容器的末尾，上述CSS选择器可以正常命中。如果是放置操作按钮，更推荐使用MUI内置的DialogActions组件替代自定义Stack，默认自带横向布局、间距等适配样式，和Dialog的结构适配性更好。

内容的提问来源于stack exchange，提问作者Malloc28