MUI主题配置中如何仅覆盖MuiDialog后代的MuiButton组件样式

之前写的配置没有生效，本质是选择器和实际DOM类名不匹配：

• MUI组件挂载的根类名固定带-root后缀，你在嵌套选择器中写的.MuiButton没有补全这个后缀，页面上的按钮元素实际只有.MuiButton-root类，不存在单独的.MuiButton类，自然匹配不到元素
• MUI主题完全支持“仅当按钮是指定组件后代时才应用覆盖样式”的需求，不存在能力不支持的限制。

方案1：在Dialog的样式配置块中嵌套选择器 #

补全Button的完整根类名后，最终生成的CSS规则和原生CSS写法完全等价，能精准命中Dialog内部的所有Button：

theme.overrides = {
  MuiDialog: {
    root: {
      border: "7px solid red",
      "& .MuiButton-root": { 
        border: "5px solid blue" 
      }
    }
  }
};

该配置最终生成的选择器就是.MuiDialog-root .MuiButton-root，和原生CSS写的选择器效果完全一致。

方案2：在Button的样式配置块中增加父类判断 #

如果希望样式规则归属到Button的配置下，也可以反向写父类选择器，逻辑更清晰，避免在Dialog的配置块中混杂其他组件的样式规则：

theme.overrides = {
  MuiButton: {
    root: {
      // 仅当按钮的祖先元素带有MuiDialog-root类名时，才应用该样式
      ".MuiDialog-root &": {
        border: "5px solid blue"
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Dashiell Rose Bark-Huss