Material-ui主题父组件，但不是相同类型的子组件

Question

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

例如：

这是我的主题：

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

我似乎无法弄清楚如何使这种样式仅适用于父级ExpansionPanelSummary组件，而不适用于另一个ExpansionPanel内部存在的任何ExpansionPanelSummary组件。

这是一个沙箱示例：

Answer 1

以下是执行此操作的一种方法：

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;