CSS is not working

[teodosii]

CSS is not working

[PierreAndreis]

@dstroot could you post your webpack configuration?
This package requires you to have .css extensions setup

In the future, this package could get the .css hosted in cdn or as separate import and ask the user to import it themselves

[dstroot]

FYI:

import ReactNotification from 'react-notifications-component';
import '../../node_modules/react-notifications-component/dist/theme.css'; <-----!

[dstroot]

Also - how do you add the font awesome checkmark??

[teodosii]

Hey,
dstroot,

I've tested now with create-react-app and style is imported properly. Make sure you're referencing node_modules properly, I don't know your folder structure so I can't tell you exactly. This is how I imported in create-react-app

import "../node_modules/react-notifications-component/dist/theme.css";

To include font awesome check mark - or any other icon toolkit - you need either:

• custom content with custom CSS
• change current CSS to suit your needs

The way we're doing it on GitHub pages is custom content with custom CSS, but it should work well also if you tweak react-notifications-component stylesheet. Have a look at samples to see how it is done.

[themre]

usually if you use CRA, then it's just import 'react-notifications-component/dist/theme.css'

[dstroot]

@teodosii - thanks for the responses. I tried to use custom content but I could get it to work. I am assuming I was not referencing the custom content react component properly.

@themre - yep, using CRA and you are right - I had to dive into the folder structure to find the theme so I took the full path.

[teodosii]

You could or couldn't? I didn't get what you meant by

I was not referencing the custom content react component properly

Here is how custom content is used in samples to have that icon included

this.props.addNotification(Object.assign({}, notification, {
  width: 275,
  container: getContainer(),
  content: (
    <div className="notification-custom-success">
      <div className="notification-custom-icon">
        <i className={iconClassName} />
      </div>
      <div className="notification-custom-content">
        <p className="notification-message">
          {message}
        </p>
      </div>
    </div>
  )
}));

And this is the SASS code for it (not included by react-notifications-component)

.notification-custom-icon {
  flex-basis: 20%;
  position: relative;
  display: inline-block;
  padding: 8px 8px 8px 12px;

  .fa {
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 28px;
    position: relative;
    transform: translate(-50%, -50%);
  }
}

.notification-custom-success {
  width: 100%;
  display: flex;
  background-color: #28a745;

  .notification-custom-icon {
    border-left: 8px solid darken(#28a745, 15%);
  }
}

I will update README soon so that there will be some examples there as well.

[dstroot]

@PierreAndreis - my config is based on:

"react-scripts": "2.0.0-next.3e165448"

@teodosii - that worked! Thanks!

My main point was the readme didn't mention importing the theme CSS which is obviously needed.

Cheers!

[teodosii]

Closing this issue as it has been fixed.