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

【问题标题】：Material-ui theme parent component but not child component of same typeMaterial-ui 主题父组件但不是同类型子组件
【发布时间】：2019-11-26 18:20:34
【问题描述】：

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

例如：

这是我的主题：

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

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

这是一个沙盒示例：

【问题讨论】：

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

标签： javascript css reactjs material-ui

【解决方案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;

【讨论】：