I can see that with webpack-dev-server HMR enabled react-hot-loader, material-ui is injecting new styles (<style>) into on every change so when I switch from lightTheme to darkTheme its injecting a number of styles adding to the previous styles. so when I change back to lightTheme and save; its once again adding the light theme styles after the previous darkTheme styles and initial lightTheme styles. This is causing some css conflicts and as a result does not change back to lightTheme unless I refresh page
Is this expected functionality and it just doesn't play nice with react-hot-loader or is there a solution to this?
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)