javascript - Material-ui 主题父组件但不是同类型子组件

Question

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

例如：

这是我的主题：

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

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

这是一个沙盒示例：

标签： javascriptcssreactjsmaterial-ui

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;