2

https://www.npmjs.com/package/react-notifications

I am trying to get this to work in my project.

If I link directly to the CSS from the demo (app.css) it works, but according to the documentation I should be able to do this...

import 'react-notifications/lib/notifications.css';

If I change this line with a copy to a local .css file with the code from app.css in the demo it kind of works except it can't find the fonts. I shouldn't have to do this though right?

It basically renders without all the CSS effects at the bottom of the page. I'm not sure why it's not importing the CSS correctly?

Here is my App.js file

import React, { Component } from "react";
import { withRouter } from "react-router-dom";

import Routes from "./routes/Routes";
import Footer from "./components/Footer";
import Header from "./components/Header";

//The following below disables the warning since BootstrapSlider won't be used but he css is needed
/* eslint-disable no-unused-vars*/

// import { authUser, signOutUser } from "./libs/awsLib";

import "./assets/scss/index.scss";
import 'react-notifications/lib/notifications.css';

import {NotificationContainer} from 'react-notifications';

class App extends Component {

  constructor(props) {
    super(props);
    console.log(this.props.theme);
    this.state = {
      isAuthenticated: false,
      isAuthenticating: true
    };
  }

  //This verifies that the session was read first for login status before rendering
  //This function is part of the React Event Library
  //https://reactjs.org/docs/react-component.html
  async componentDidMount() {
    try {
      // if (await authUser()) {
      if (true) {
        // this.userHasAuthenticated(true);
      }
    }
    catch (e) {
      alert(e);
    }

    this.setState({ isAuthenticating: false });
  }

  //This allows anything with access to App to set authenticated to true
  userHasAuthenticated = authenticated => {
    this.setState({ isAuthenticated: authenticated });
  }

  handleLogout = event => {
    // signOutUser(); //This clears the actual session/localstorage out
    this.userHasAuthenticated(false);//This clears the App state
    //We have access to <Route> properties and functions thanks to withRouter()
    this.props.history.push("/login");
  }

  render() {
    const childProps = {
      isAuthenticated: this.state.isAuthenticated,
      userHasAuthenticated: this.userHasAuthenticated,
      theme: this.props.theme
    };
    return (
      !this.state.isAuthenticating &&
      <div className="App container">
        <Header theme={this.props.theme} isAuthenticated={this.state.isAuthenticated} handleLogout={this.handleLogout} />
        <Routes childProps={childProps} />
        <Footer theme={this.props.theme}/>
        <NotificationContainer/>
      </div>
    );
  }
}

//withRouter will give access to Route class properties/functions
//https://reacttraining.com/react-router/web/api/withRouter
export default withRouter(App);
Joseph Astrahan
  • 8,659
  • 12
  • 83
  • 154
  • I got this to work by going into the node_modules copying the .css into my assets locations and the fonts folder with it...but not sure this is the correct way to do it? Shouldn't I be loading it from the default location without issue? – Joseph Astrahan Jul 02 '18 at 05:56
  • did you explicitly exclude `node_modules` from webpack css rule? – Anurag Awasthi Jul 02 '18 at 05:59
  • I'm using default react-app create app, so not sure I think they hide this from me – Joseph Astrahan Jul 02 '18 at 06:10

1 Answers1

0

@import '~react-notifications-component/dist/theme.css';

Adding a ~ before the library name worked for me.

Maifee Ul Asad
  • 3,992
  • 6
  • 38
  • 86
Kurshith
  • 81
  • 1
  • 7