Как установить CSS для реагирования-редукса-тостра - PullRequest
Новая
       1

Как установить CSS для реагирования-редукса-тостра

0 голосов
/ 10 апреля 2019

Я пытался использовать react-redux-toastr для уведомлений, но я не могу правильно загрузить CSS. Я использую webpack для связывания, в LoginForm.js LoginForm.css загружается правильно и вступает в силу (оттуда появляется зеленый фон), react-redux-toastr.min.css для react-redux-toastr не работает. Я попытался включить его в файл, где запускается тостер, и в корне, но ни один из них не помог. Поскольку webpack компилируется, он должен удовлетворять всем import -ам.

Пожалуйста, помогите мне отладить и исправить эту проблему.

No CSS

appClient.js 

...
import RootReducer from './reducers/flightControlApp';
import './components/style/react-redux-toastr.min.css';
import ReduxToastr from 'react-redux-toastr';

...

let store = compose(applyMiddleware(...middlewares)) (createStore) (
    RootReducer,
    persistedState
);

...

window.onload = () => 
{
    ReactDOM.render(
        <MuiThemeProvider muiTheme={getMuiTheme()}>
            <Provider store={ store }>
                <div>
                    <ReduxToastr
                            timeOut={15000}
                            newestOnTop={false}
                            preventDuplicates
                            position="top-left"
                            transitionIn="fadeIn"
                            transitionOut="fadeOut"
                            progressBar
                            closeOnToastrClick/>
                    <AppRoutes />
                </div>
            </Provider>
        </MuiThemeProvider>,
        document.getElementById('app'));
}

. / Редукторы / flightControlApp.js 

import { combineReducers } from 'redux';
import UserReducer from './userReducer';
import UserStatsReducer from './userStatsReducer';
import {reducer as toastrReducer} from 'react-redux-toastr'

let rootReducer = combineReducers({
    userState: UserReducer,
    statsState: UserStatsReducer,
    toastr: toastrReducer
})

export default rootReducer;

LoginForm.js 

import React from 'react';
import { Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import './style/LoginForm.css';
import { toastr } from 'react-redux-toastr';
import { PulseLoader } from 'react-spinners';
import { assert } from 'chai';

class LoginForm extends React.Component{

    componentDidUpdate() {
        if (this.props.isLoginError)
        {
            toastr.error('Error:', 'Login failed', {
                onShowComplete: this.props.onResetLoginCallback,
                onToastrClick: this.props.onResetLoginCallback
            });
        }
    }

 render() {
   ...
  }
 }
...