I have a simple ReactJS app based on hooks (no classes) using StrictMode.
I am using React version 16.13.1 and Material-UI version 4.9.10.
In the Appbar I am using Drawer.
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
onClick={handleDrawerOpen}>
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Online Information
</Typography>
</Toolbar>
</AppBar>
<Drawer
variant="persistent"
anchor="left"
open={open}
></Drawer>
</div>
I notice that when I open the Drawer, I get the following warning.
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance
of
Transition which is inside StrictMode. Instead, add a ref directly to the element you
want to reference. Learn more about using refs safely ....
in div (created by Transition)
in Transition (created by ForwardRef(Fade))
in ForwardRef(Fade) (created by ForwardRef(Backdrop))
in ForwardRef(Backdrop) (created by WithStyles(ForwardRef(Backdrop)))
in WithStyles(ForwardRef(Backdrop)) (created by ForwardRef(Modal))
in div (created by ForwardRef(Modal))
in ForwardRef(Portal) (created by ForwardRef(Modal))
in ForwardRef(Modal) (created by ForwardRef(Drawer))
in ForwardRef(Drawer) (created by WithStyles(ForwardRef(Drawer)))
I found some reference on the web for this issue but still can’t figure out how to resolve this issue.
Can someone please add some workaround for this problem?
Thank you
Best Answer
According to Material-ui changelog, it should be solve in V5, which is still in alpha.
It seems that at least in some cases this issue cause by
createMuiTheme
. You can solve this issue by using the experimental (unstable) theme creatorIf you want to get the experimental theme creator instead of removing
React.StrictMode
, you can change it's import from:To
UPDATE
V5 is officially out (and now called MUI). If upgrading is an option for you - it should solve this issue as well.