React Material-UI Webpack热加载在保存时在<head>中注入重复样式

如何解决React Material-UI Webpack热加载在保存时在<head>中注入重复样式

我看到启用了webpack-dev-server HMR的react-hot-loader，material-ui会在每次更改中注入新样式（<style>），因此当我从lightTheme切换为darkTheme时，它会注入添加到先前样式中的样式数。所以当我改回lightTheme并保存时；在先前的darkTheme样式和初始lightTheme样式之后，它再次添加了light主题样式。这会导致一些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)