Css classname not applied to react component

Question

I appreciate your time and help. I spent hours trying to figure this out can't seem to get to the bottom of it.

I have this react component:

import styles from './style.scss';

class ButtonComponent extends React.Component { 
  render() {
    return (
      <div className={styles.bunny}>
        hello world
      </div>
    );
  }
}

and scss file:

.bunny {
  display: block;
  margin-top:50px;
  margin-bottom:55px;
  background-color: blue;
}

When I load up my html, the div has no classname when I expect it to be <div class="bunny">

When I put the class name in the react component literally like this:

<div className="bunny"> 

then I can see the className in the browser.

What am I doing wrong?

Thank you so much in advance.

Answer 1

Firstly, you need to guarantee it's defined with: console.log(styles) Im' not sure you import style.scss correctly.

Answer 2

You need to import your scss like... import './styles.scss';

Webpack will take care of bundling your styles so you can add the className as a string on your component.

<div className="bunny">Hello World</div>