javascript - 更改 Material-ui 中展开的父 ExpansionPanel 上的 ExpansionPanel 箭头颜色

Question

试图弄清楚如何让 Material-ui 主题按照我想要的方式工作，但遇到了一些麻烦。

我想要的是我的扩展面板在扩展时具有不同的箭头颜色，以使它们更加明显。问题是我仅在父扩展面板上需要此行为，而不是在扩展面板内的扩展面板上。

目前，我已经编写了 Material UI 主题，以便只有父级扩展面板在扩展时才会发生颜色变化，如下所示:

我的问题是，在深蓝色面板摘要中很难看到黑色箭头。我希望能够将该颜色更改为白色，但仅在父面板中时。所以基本上，只要 ExpansionPanelSummary 为蓝色，箭头就应该为白色。

我似乎找不到 CSS 控件来完成我想要的操作。这是我的 ExpansionPanelSummary 主题，用于控制颜色(我认为我的箭头 CSS 应该位于此处，但我不确定):

      MuiExpansionPanelSummary: {
        root: {
          minHeight: "0px",
          minWidth: "0px",
          "&$expanded": {
            //Elevation 1
            boxShadow:
              "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12)",
            minHeight: "0px",
            backgroundColor: "#3f51b5",
            color: "white"
          },
          ".MuiExpansionPanelDetails-root &$expanded": {
            backgroundColor: "transparent",
            color: "black"
          }
        },
        content: {
          minWidth: "0px",
          margin: "8px 0px",
          "&$expanded": {
            margin: "8px 0px"
          }
        }
      },

任何帮助或指示将不胜感激。

Answer 1

下面是实现此目的的一种方法，它使用 MuiExpansionPanelSummary-expandIcon 类来定位图标并将其覆盖回 default用于嵌套扩展面板。

import { createMuiTheme } from "@material-ui/core";
const defaultTheme = createMuiTheme();

const myTheme = createMuiTheme({
  overrides: {
    MuiExpansionPanelSummary: {
      root: {
        minHeight: "0px",
        minWidth: "0px",
        "&$expanded": {
          //Elevation 1
          boxShadow:
            "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12)",
          minHeight: "0px",
          backgroundColor: "#3f51b5",
          color: "white",
          "& .MuiExpansionPanelSummary-expandIcon": {
            color: "white"
          }
        },
        ".MuiExpansionPanelDetails-root &$expanded": {
          backgroundColor: "transparent",
          color: "black",
          "& .MuiExpansionPanelSummary-expandIcon": {
            color: defaultTheme.palette.action.active
          }
        }
      }
    }
  }
});

export default myTheme;