时间戳

首页 > 解决方案 > 材质 UI 持久抽屉闪烁

javascript - 材质 UI 持久抽屉闪烁

问题描述

我目前正在尝试实现一个持久抽屉，到目前为止，如果我将 className 放在我的组件中，就像这样......

<div>
     <FitTracHeader
      className={clsx(classes.appBar, {[classes.appBarShift]: drawer})}  <- className here works but need to do for every component
      toggleDarkMode={props.toggleDarkMode}
      darkMode={props.darkMode}
      searchFilter={searchFilter}
      toggleDrawer={() => toggleDrawer(!drawer)}
     />
     ... *Additional components that also should shrink upon drawer opening* 
</div>

因为我想拥有多个组件，所以我不想将这个 className 作为 props 重复传递给所有子组件，而是将它添加到封装我所有组件的 div 标记中。问题在于屏幕闪烁，如此处所示https://www.youtube.com/watch?v=2NU4vJNWSGc （注意：视频的前半部分显示了上述代码。然后我将其修改为底部代码并然后我们看到闪烁。）

<div className={clsx(classes.appBar, {[classes.appBarShift]: drawer})}>
    <FitTracHeader
     toggleDarkMode={props.toggleDarkMode}
     darkMode={props.darkMode}
     searchFilter={searchFilter}
     toggleDrawer={() => toggleDrawer(!drawer)}
    />
    ... *Additional components that also should shrink upon drawer opening* 
</div>

我根据可用的文档创建的标题和应用栏 https://material-ui.com/components/drawers/

这可能是一个重要的 UI 错误还是我做错了什么？干杯!

标签： javascriptreactjsmaterial-ui

解决方案

推荐阅读