Блог

Главная - Вопросы по программированию - React Material-горячая перезагрузка веб-пакета пользовательского интерфейса, вводящая повторяющиеся стили в при сохранении

React Material-горячая перезагрузка веб-пакета пользовательского интерфейса, вводящая повторяющиеся стили в при сохранении

#reactjs #webpack #material-ui #webpack-dev-server #react-hot-loader

#reactjs #веб-пакет #материал-пользовательский интерфейс #webpack-dev-server #реагирующий горячий загрузчик

Вопрос:

Я вижу, что с включенным HMR-загрузчиком webpack-dev-server, material-ui вводит новые стили ( <style> ) при каждом изменении, поэтому, когда я переключаюсь с lightTheme на darkTheme, он вводит несколько стилей, добавляющихся к предыдущим стилям. поэтому, когда я возвращаюсь к lightTheme и сохраняю; он снова добавляет стили темы light после предыдущих стилей 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)

Комментарии:

1. Вы когда-нибудь получали разрешение для этого? У меня такая же проблема, и это довольно раздражает.

2. Из того, что я встречал в различных потоках MaterialUI по этому вопросу, состоит в том, что MaterialUI плохо подходит для HMR, по крайней мере, для механизма HMR, популярного в Webpack. В дополнение к идее, что перезагрузки страницы / состояния дают более реалистичную, хотя и неудобную функциональность вашего приложения; В итоге я удалил HMR, поскольку это не стоило проблем. Material UI для меня был больше проблем, чем его ценность, по крайней мере, с полноценным участием MaterialUI.

3. Итак, у меня есть частичное исправление, по крайней мере, одно, которое сработало для меня. Я отключил строгий режим для реакции, и волшебным образом проблема исчезла. Я не думаю, что это хорошее решение в любом случае, но оно дает некоторые доказательства основной причины. В любом случае, просто подумал, что поделюсь.