仅当其他组件的后代时，主题才会覆盖组件答案

【问题标题】：Theme override component only when descendant of other component仅当其他组件的后代时，主题才会覆盖组件
【发布时间】：2021-04-24 19:46:53
【问题描述】：

我想覆盖MuiButton 的css，但前提是它是MuiDialog 的后代。

在 css 中你可以这样做：

.MuiDialog-root .MuiButton-root {
    border: 5px solid blue;
}

但我不知道如何在主题覆盖中做到这一点：

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

这没有将样式应用到按钮。

只有当 MUI 按钮是某个指定的 Mui 组件的后代时，是否可以覆盖 MUI 按钮的样式？

CodeSandbox

【问题讨论】：

这是你想要的吗：codesandbox.io/s/… ?
@Medi 不，我想要它，所以每个对话框都有相同样式的按钮。按照您展示的方式，我总是必须在每个对话框按钮上添加样式。

标签： css reactjs material-ui

【解决方案1】：

我能够更改对话框中按钮的背景。也许你没有使用正确的类名：codesandbox。

 MuiDialog: {
    root: {
      border: "7px solid red",
      "& button": { backgroundColor: "blue" } // <- how to target MUIButton when descendent of MUIDialog?
    }
  }

【讨论】：

这在这种情况下很有帮助，但这是针对按钮标签的。我正在寻找目标 MUI 按钮和其他 MUI 组件。我只是以 MUI 按钮为例。不能定位 MUI 按钮吗？
你的回答激励我尝试不同的类名，"& .MuiButton-root" 工作。

【解决方案2】：

主题覆盖中的类名应为& .MuiButton-root

【讨论】：