Style of external libraries doesn't work?

Question

I'm developing a react app, when I use external libraries, the style is not working. The result is not as expected.

I'm using https://fkhadra.github.io/react-toastify/ (check the outcomes there)

and this is how I see the result:

Is there something that I'm missing when installing external libs?

Answer 1

You need to import the css to apply the styles. The sample code is in their github repo:https://github.com/fkhadra/react-toastify

   import React, { Component } from 'react';
      import { ToastContainer, toast } from 'react-toastify';
      import 'react-toastify/dist/ReactToastify.css';
      // minified version is also included
      // import 'react-toastify/dist/ReactToastify.min.css';

      class App extends Component {
        notify = () => toast("Wow so easy !");

        render(){
          return (
            <div>
              <button onClick={this.notify}>Notify !</button>
              <ToastContainer />
            </div>
          );
        }

  }