[英]How can I override ExpansionPanelSummary deep elements with styled-components?
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
.使用文档/示例来覆盖带有样式组件的 Material UI 样式,我设法在
ExpansionPanel
和ExpansionPanelDetails
了根和“深层元素”的样式。
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.但是,当我使用相同的技术从传递给
styled()
的函数返回覆盖的ExpansionPanelSummary
, ExpansionPanelSummary
在 DOM 中移动,并且整个ExpansionPanel
不再正确呈现。
The technique in question, as applied to ExpansionPanel
(this works as expected, on the container ExpansionPanel
):有问题的技术,适用于
ExpansionPanel
(这在容器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
}
`;
The typical DOM (with class names abbreviated) for ExpansionPanel
and friends: ExpansionPanel
和朋友的典型 DOM(类名缩写):
<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>
The DOM when I apply the above technique to ExpansionPanelSummary
:当我将上述技术应用于
ExpansionPanelSummary
时的 DOM:
<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>
For completeness, here's a minimal repro of what I'm doing to ExpansionPanelSummary
, that triggers the DOM switch:为了完整起见,这是我对
ExpansionPanelSummary
所做的操作的最小再现,它触发了 DOM 切换:
export const ExpansionPanelSummary = styled(props => (
<MUIExpansionPanelSummary
{...props}
/>
))``;
And my JSX is standard ExpansionPanel
setup:我的 JSX 是标准的
ExpansionPanel
设置:
<ExpansionPanel>
<ExpansionPanelSummary>
Summary Label
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<div>Some Content</div>
</ExpansionPanelDetails>
</ExpansionPanel>
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
:您可以使用以下
ExpansionPanelSummary
包装类似地重现这一点:
const MyCustomSummary = props => {
return (
<ExpansionPanelSummary {...props} expandIcon={<ExpandMoreIcon />}>
<Typography>{props.text}</Typography>
</ExpansionPanelSummary>
);
};
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.有几个像这样的组件组,其中 Material-UI 父组件查找特定类型的子组件并特别对待该子组件。 For instance, you can find the following block in
ExpansionPanel
例如,您可以在
ExpansionPanel
找到以下块
if (isMuiElement(child, ['ExpansionPanelSummary'])) {
summary = React.cloneElement(child, {
disabled,
expanded,
onChange: this.handleChange,
});
return null;
}
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:幸运的是,Material-UI 有一种直接的方式告诉它你的自定义组件应该通过
muiName
属性被视为一个特定的 Material-UI 组件:
MyCustomSummary.muiName = "ExpansionPanelSummary";
or in your case it would look like:或者在您的情况下,它看起来像:
export const ExpansionPanelSummary = styled(props => (
<MUIExpansionPanelSummary
{...props}
/>
))``;
ExpansionPanelSummary.muiName = "ExpansionPanelSummary";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.