material-ui Drawer - findDOMNode is deprecated in StrictMode Ask Question

material-ui Drawer - findDOMNode is deprecated in StrictMode Ask Question

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

ベストアンサー1

According to Material-ui changelog, it should be solve in V5, which is still in alpha.

少なくともいくつかのケースでは、この問題は によって引き起こされているようですcreateMuiTheme。この問題は、実験的な(不安定な)テーマクリエーターを使用することで解決できます。

を削除する代わりに実験的なテーマ クリエーターを取得したい場合はReact.StrictMode、次のようにインポートを変更できます。

import { createMuiTheme } from '@material-ui/core';

import { unstable_createMuiStrictModeTheme as createMuiTheme } from '@material-ui/core';

アップデート

V5が正式にリリースされました(現在はムイ)。アップグレードが選択肢にある場合は、この問題も解決されるはずです。

おすすめ記事