Implementation in react redux - css not loading

[trekiteasy]

Do you want to request a feature or report a bug? This is probably more about me not integrating correctly in a redux react app ? (Even though I looked at your example and feel I'm doing exactly what you are doing...

What is the current behavior? The Toast css isn't loaded at all (I need to write the css class myself with position: fixed and z-index: 9999 in order to see it - styleless).

The app has a search bar and I was willing to open a toast when a search starts. The toast is here (in the DOM), but without CSS it is not visible unless I write a custom css class. What I am missing ?

The code :

App.js

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

class App extends React.Component {
  render () {
    return (
      <div>
        <ToastContainer />
       <!-- Other containers -->
      </div>
    );
  }
}

/ Rest of the App.js file /

actions.js

import { toast } from 'react-toastify';

export const UNIFIED_SEARCH_START = 'UNIFIED_SEARCH_START';

export function unifiedSearchStart () {
  toast.success('Unified search start');
  return {
    type: UNIFIED_SEARCH_START,
    payload: true
  };
}

export function unifiedSearch (terms) {
  return dispatch => {
    dispatch(unifiedSearchStart());
    /* do other things here */
  }
}

What is the expected behavior? Was expecting to have the css with this

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? react 16.3.2 - chrome - MacOS

[haihoang20]

This is also happening to me. If I use just toast then nothing appears on the screen at all. If I use ToastContainer then plain text gets rendered on the page where the container is.

My app is built using the latest versions of create-react-app and redux.

[boredcity]

same here; the strange thing is that close button actually renders with correct css

[fkhadra]

Hello,

Could you reproduce the issue on codesanbox?

Did you render the ToastContainer at the root of your app ? Where did you import the css?

Thanks

[boredcity]

added import "react-toastify/dist/ReactToastify.css";. it all works. :) sorry to bother about this

[trekiteasy]

Did you render the ToastContainer at the root of your app ? Where did you import the css?

Yes, ToastContainer is rendered at the root of my app (as in App.js above). I import the css only in App.js (as above), in the same file containing my ToastContainer.

[RenatRysaev]

Hello, i have the same problems.

UPDATE: I resolved this problems. Need to split css modules from just import styles.

Here good article on this theme: https://medium.freecodecamp.org/how-i-integrated-css-modules-with-scss-into-my-react-application-32f473e1bb51

[trekiteasy]

@RenatRysaev I think you nailed it... but you lost me at the same time ! Could you give a bit more detail on what you actually did and in which files ? Thanks in advance !

[bhanushukla]

The import will not work with css-loader in place. You should import it where you have your global css loaded.

I did @import '../node_modules/react-toastify/dist/ReactToastify.min.css'; in my global css so that it is unescaped from CSS modules.

[fkhadra]

I'll close the issue since it's more related to build tools than the lib itself.