根据 Material-ui changelog，应该是在 V5 中解决的，目前还处于 alpha 阶段。

似乎至少在某些情况下这个问题是由createMuiTheme. 您可以使用实验性（不稳定）主题创建器来解决此问题

如果您想获取实验主题创建者而不是删除React.StrictMode，您可以更改它的导入：

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

到

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

更新

V5 正式发布（现在称为MUI）。如果升级是您的选择 - 它也应该解决这个问题。

这是StrictMode 警告

严格模式检查仅在开发模式下运行；它们不会影响生产构建。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

到

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

此警告是由于许多 Material-ui 组件（如 Drawer、Tooltip、Snackbar 等）中使用的 Transition 组件造成的。

就我个人而言，我在所有这些中都遇到了这个警告，但只针对 Snackbar 组件修复了这个问题。

解决方案是创建一个 ref 并将其传递到您的根组件中。然后，手动将 ref 转发到使用 Transition 的子组件。

这是 Snackbar 组件的代码，它为我解决了这个问题。由于它只是一个警告，因此可能会忽略它。您不需要删除 StrictMode。它将在未来的 material-ui 版本中修复。

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

//MUI Stuff
import { makeStyles } from '@material-ui/core/styles';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';

// Redux
import { hideAlert } from '../../redux/actions/uiActions';
import Slide from '@material-ui/core/Slide';

const Alert = React.forwardRef((props, ref) => {
    return <MuiAlert ref={ref} elevation={6} variant="filled" {...props} />;
});

const SlideTransition = React.forwardRef((props, ref) => {
    return <Slide ref={ref} {...props} direction="left" />;
});

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    snackbar: {
        [theme.breakpoints.down('sm')]: {
            bottom: 65,
        },
    },
}));

const SnackAlert = () => {
    const snackbarRef = React.createRef(null);
    const classes = useStyles();
    const { alert, alertType, alertMessage } = useSelector((state) => ({
        alert: state.ui.alert,
        alertType: state.ui.alertType,
        alertMessage: state.ui.alertMessage,
    }));
    const dispatch = useDispatch();
    const [open, setOpen] = React.useState(false);

    useEffect(() => {
        setOpen(alert);
    }, [alert]);

    const handleClose = () => {
        setOpen(false);
        dispatch(hideAlert());
    };

    return (
        <div className={classes.root}>
            <Snackbar
                ref={snackbarRef}
                className={classes.snackbar}
                open={open}
                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                autoHideDuration={5000}
                onClose={handleClose}
                message={alertMessage}
                TransitionComponent={SlideTransition}
            >
                <Alert onClose={handleClose} severity={alertType}>
                    {alertMessage}
                </Alert>
            </Snackbar>
        </div>
    );
};
export default SnackAlert;

更改主题配置

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

到

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

生成一个主题，以减少 React.StrictMode 中的警告数量，例如警告：在 StrictMode 中不推荐使用 findDOMNode。

警告：请勿在生产中使用此方法。

供生产使用import { createMuiTheme } from '@material-ui/core';，并将 StrictMode 替换为 Fragment。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

到

ReactDOM.render(
  <React.Fragment>
    <App />
  </React.Fragment>,
  document.getElementById('root')
);

我在尝试使用 React material Select 组件进行选择时遇到了同样的错误。我在 React 文档中找到了这个页面，该页面讨论了严格模式并引用了这个特定的错误。

React StrictMode 部分中引用了此错误：

有关已弃用的 findDOMNode 用法的警告

这是指示如何解决问题的示例代码段。看起来我们需要创建一个 React Ref，然后将该引用附加到抛出错误的 DOM 节点。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.wrapper = React.createRef();
  }
  render() {
    return <div ref={this.wrapper}>{this.props.children}</div>;
  }
}