我有一个临时抽屉,里面有标签。当抽屉打开并切换颜色主题时,选项卡中组件的自定义样式将被删除,从而破坏样式。如果我关闭抽屉或在选项卡之间切换,它就可以解决问题。这种情况仅发生在两个选项卡中,而不是所有选项卡中。请参阅下面的图片。
为了简单起见,我将显示“检查结果”选项卡的代码。 Cog 图标的样式已被删除,默认位于左侧。
...
const styles: StyleRulesCallback = () => ({
buttonDiv: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'flex-end',
},
});
...
type Props = StateProps & DispatchProps & WithStyles<typeof styles>;
class CheckResultsPanel extends React.Component<Props> {
...
render() {
this.selectedKeys = [];
const tree = this.renderTree();
const { classes } = this.props;
return (
<div id="checkResultsPanel">
<div className={classes.buttonDiv}>
<IconButton onClick={this.designSettingsClick} aria-label="Design Settings">
<SettingsIcon />
</IconButton>
</div>
<Divider />
{tree}
</div>
);
}
有问题的组件被导入到抽屉中,如下所示:
<div className="right-sidebar-container">
<div id="loadCaseObjectTabs" className={classes.root}>
<AppBar position="static">
<Tabs value={this.state.topValue} onChange={this.topHandleChange} fullWidth>
<Tab label="Objects" />
<Tab label="Load Cases" />
</Tabs>
</AppBar>
{topValue === 0 ? <div className={classes.tabs}><NavigationPanel /></div> : undefined}
{topValue === 1 ? <div className={classes.tabs}><LoadCasesPanel /></div> : undefined}
</div>
<div id="checkResultsPropertiesTabs" className={classes.root}>
<AppBar position="static">
<Tabs value={bottomTabIndices[this.props.bottom]} onChange={this.bottomHandleChange} fullWidth>
<Tab label="Check Results" />
<Tab label="Properties" />
</Tabs>
</AppBar>
{this.props.bottom === 'checkResults' ? <div className={classes.tabs}><CheckResultsPanel /></div> : undefined}
{this.props.bottom === 'properties' ? <div className={classes.tabs}><PropertiesPanel /></div> : undefined}
</div>
</div>
最佳答案
我们发现了这个问题。对于这个模糊的例子表示歉意。该问题是由我们实现的优化引起的。仅当某些属性发生更改并且类未通过此逻辑传递时,组件才会设置为更新。切换主题时,它更改了应用程序的所有样式,但由于组件未更新,因此未应用样式。
shouldComponentUpdate(nextProps: Props) {
...
if (this.props.classes !== nextProps.classes) return true;
...
}
关于reactjs - 在组件重新渲染时删除了 Material-UI 自定义 JSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52635502/