Javascript 材质ui主题父组件，但不是相同类型的子组件

我正在尝试设置材质UI扩展面板的样式，以便在展开时仅将主题应用于父级扩展面板，而不应用于其中的任何嵌套面板

例如：

以下是我的主题：

const myteme=createMuiTheme({
覆盖：{
MUIEExpansionPanelSummary：{
根目录：{
最小高度：“0px”，
最小宽度：“0px”，
“&$expanded”：{
背景颜色：“浅蓝色”
}
}
}
}
});

我似乎不知道如何使此样式仅适用于父ExpansionPanelSummary组件，而不适用于存在于另一个ExpansionPanel中的任何ExpansionPanelSummary组件

下面是一个沙箱示例：

---

下面是一种方法：

import { createMuiTheme } from "@material-ui/core";

const myTheme = createMuiTheme({
  overrides: {
    MuiExpansionPanelSummary: {
      root: {
        minHeight: "0px",
        minWidth: "0px",
        "&$expanded": {
          backgroundColor: "lightblue"
        },
        ".MuiExpansionPanelDetails-root &$expanded": {
          backgroundColor: "transparent"
        }
      }
    }
  }
});

export default myTheme;

---

主题可能不如实施重要。您可能希望在组件中使用一个布尔值来控制它，默认值为false，然后选择父级。这样做的唯一问题是可伸缩性。此项目中的扩展面板太多，因此不是最佳解决方案。此外，我不确定它将如何选择加入/退出主题，因为它似乎是组件的全局。