如何使用样式组件覆盖ExpansionPanelSummary深层元素？

如何使用样式组件覆盖ExpansionPanelSummary深层元素？

这个困难与使用样式化组件无关，而仅与包装

ExpansionPanelSummary

在另一个组件中有关。

您可以使用以下包装方式类似地重现此内容

ExpansionPanelSummary

：

const MyCustomSummary = props => {  return (    <ExpansionPanelSummary {...props} expandIcon={<ExpandMoreIcon />}>      <Typography>{props.text}</Typography>    </ExpansionPanelSummary>  );};

有几个类似的组件组，其中Material-
UI父组件会查找特定类型的子组件，并特别对待该子组件。例如，您可以在

ExpansionPanel

      if (isMuiElement(child, ['ExpansionPanelSummary'])) {        summary = React.cloneElement(child, {          disabled,          expanded,          onChange: this.handleChange,        });        return null;      }

幸运的是，Material-UI通过一种简单的方法可以通过

muiName

属性告诉您的自定义组件与特定的Material-UI组件相同：

MyCustomSummary.muiName = "ExpansionPanelSummary";

或者您的情况如下所示：

export const ExpansionPanelSummary = styled(props => (  <MUIExpansionPanelSummary    {...props}  />))``;ExpansionPanelSummary.muiName = "ExpansionPanelSummary";