如何使用样式组件覆盖ExpansionPanelSummary深层元素? [英] How can I override ExpansionPanelSummary deep elements with styled-components?

问题描述

使用文档/示例覆盖样式化Material UI样式-components，我设法在ExpansionPanel和ExpansionPanelDetails内设置了根元素和更深层的元素".

Using the docs/examples for overriding Material UI styling with styled-components, I've managed to style the root and "deeper elements" within an ExpansionPanel and ExpansionPanelDetails.

但是，当我使用相同的技术从传递给styled()的函数返回重写的ExpansionPanelSummary时，ExpansionPanelSummary在DOM中移动，并且整个ExpansionPanel不再正确呈现.

However, when I use the same technique to return an overridden ExpansionPanelSummary from a function passed to styled(), the ExpansionPanelSummary moves in the DOM and the whole ExpansionPanel no longer renders correctly.

应用于ExpansionPanel的相关技术(此功能按预期在容器ExpansionPanel上起作用):

The technique in question, as applied to ExpansionPanel (this works as expected, on the container ExpansionPanel):

import MUIExpansionPanel from '@material-ui/core/ExpansionPanel';

export const ExpansionPanel = styled(props => (
  <MUIExpansionPanel
    classes={{expanded: 'expanded'}}
    {...props}
  />
))`
  && {
    ...root style overrides
  }
  &&.expanded {
    ...expanded style overrides
  }
`;

ExpansionPanel和朋友的典型DOM(缩写为类名):

The typical DOM (with class names abbreviated) for ExpansionPanel and friends:

<div class="MuiExpansionPanel...">
  <div class="MuiExpansionPanelSummary..." />
  <div class="MuiCollapse-container...>
    <div class="MuiCollapse-wrapper...>
      <div class="MuiCollapse-wrapperInner...>
        <div class="MuiExpansionPanelDetails..." />
      </div>
    </div>
  </div>
</div>

将上述技术应用于ExpansionPanelSummary时的DOM:

The DOM when I apply the above technique to ExpansionPanelSummary:

<div class="MuiExpansionPanel...">
  <div class="MuiCollapse-container...>
    <div class="MuiCollapse-wrapper...>
      <div class="MuiCollapse-wrapperInner...>
        <div class="MuiExpansionPanelSummary..." />
        <div class="MuiExpansionPanelDetails..." />
      </div>
    </div>
  </div>
</div>

为完整起见，这是我对ExpansionPanelSummary所做的最小复制，它会触发DOM切换:

For completeness, here's a minimal repro of what I'm doing to ExpansionPanelSummary, that triggers the DOM switch:

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

我的JSX是标准的ExpansionPanel设置:

And my JSX is standard ExpansionPanel setup:

<ExpansionPanel>
  <ExpansionPanelSummary>
    Summary Label
  </ExpansionPanelSummary>
  <ExpansionPanelDetails>
    <div>Some Content</div>
  </ExpansionPanelDetails>
</ExpansionPanel>

推荐答案

此困难与使用样式化组件无关，而与将ExpansionPanelSummary包装在另一个组件中有关.

This difficulty is independent of using styled-components and just has to do with wrapping ExpansionPanelSummary in another component.

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

You can similarly reproduce this with the following wrapping of ExpansionPanelSummary:

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

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

There are several component groups like this where a Material-UI parent component looks for a particular type of child component and treats that child specially. For instance, you can find the following block in ExpansionPanel

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

幸运的是，Material-UI通过一种简单的方法可以通过muiName属性告诉您自定义组件与特定的Material-UI组件相同:

Fortunately, Material-UI has a straightforward way to tell it that your custom component should be treated the same as a particular Material-UI component via the muiName property:

MyCustomSummary.muiName = "ExpansionPanelSummary";

或者您的情况如下:

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

ExpansionPanelSummary.muiName = "ExpansionPanelSummary";

这篇关于如何使用样式组件覆盖ExpansionPanelSummary深层元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！