Reactjs React Material UI Webpack热加载在<；中注入重复样式；头>；保存

我可以看到，启用了webpack dev server HMR的react hot loader后，material ui在每次更改中都会注入新的样式（

），因此当我从lightTheme切换到darkTheme时，它会在以前的样式中注入大量样式。所以当我回到lightTheme并保存时；它再次将灯光主题样式添加到先前的暗色调样式和初始灯光主题样式之后。这会导致一些css冲突，因此除非我刷新页面，否则不会更改回lightTheme

这是预期的功能，但它与react hot loader不兼容，还是有解决方案

import React, { useState } from 'react'
import { hot } from 'react-hot-loader/root'
import { Router, Link } from '@reach/router'
import MainLayout from './layouts/main/mainLayout'
import { CssBaseline, ThemeProvider } from '@material-ui/core'
import { lightTheme } from './themes/theme'

const App = (): JSX.Element => {

return (
    <ThemeProvider theme={lightTheme}>
        <CssBaseline />
        <Router>
            <MainLayout path="/" />
        </Router>
    </ThemeProvider>
 )
}

export default hot(App)

import React，{useState}来自“React”
从'react hot loader/root'导入{hot}
从'@reach/Router'导入{Router，Link}
从“./layouts/main/mainloayout”导入mainloayout
从'@material ui/core'导入{CssBaseline，ThemeProvider}
从“./themes/theme”导入{lightTheme}
常量App=（）：JSX.Element=>{
返回(
)
}
导出默认热（应用程序）

您对此有过解决方案吗？我也有同样的问题，这很烦人。从我在各种MaterialUI线程中看到的情况来看，MaterialUI没有很好地满足HMR，至少Webpack中流行的HMR机制。除了页面/状态重新加载的想法之外，您的应用程序提供了一个更现实但不方便的功能；我最终删除了HMR，因为它不值得麻烦。对我来说，至少在涉及到完整的MaterialUI时，MaterialUI的麻烦比它的价值更大。所以我有一个局部修复，至少一个对我有效。我禁用了react的严格模式，问题神奇地消失了。我认为这无论如何都不是一个好的解决办法，但它确实为根本原因提供了一些证据。不管怎样，我只是想和你分享。