使用的文档/例子的覆盖材料UI造型与风格的成分,我已经成功地风格内的根源,“更深层次的元素” ExpansionPanel和ExpansionPanelDetails。
ExpansionPanel
ExpansionPanelDetails
但是,当我使用相同的技术返回ExpansionPanelSummary传递给的函数的覆盖时,DOM中styled()的ExpansionPanelSummary移动以及整个移动将ExpansionPanel不再正确呈现。
ExpansionPanelSummary
styled()
所应用的技术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 } `;
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>
当我将上述技术应用于时的DOM 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切换:
export const ExpansionPanelSummary = styled(props => ( <MUIExpansionPanelSummary {...props} /> ))``;
我的JSX是标准ExpansionPanel设置:
<ExpansionPanel> <ExpansionPanelSummary> Summary Label </ExpansionPanelSummary> <ExpansionPanelDetails> <div>Some Content</div> </ExpansionPanelDetails> </ExpansionPanel>
这个困难与使用样式化组件无关,而仅与包装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组件相同:
muiName
MyCustomSummary.muiName = "ExpansionPanelSummary";
或者您的情况如下所示:
export const ExpansionPanelSummary = styled(props => ( <MUIExpansionPanelSummary {...props} /> ))``; ExpansionPanelSummary.muiName = "ExpansionPanelSummary";