I value your time and assistance. I have spent many hours trying to solve this issue but seem unable to reach a resolution.
Here is the React component in question:
import styles from './style.scss';
class ButtonComponent extends React.Component {
render() {
return (
<div className={styles.bunny}>
hello world
</div>
);
}
}
Accompanied by the SCSS file:
.bunny {
display: block;
margin-top:50px;
margin-bottom:55px;
background-color: blue;
}
Upon loading my HTML, the div lacks its expected classname <div class="bunny">
If I directly include the class name within the React component like so:
<div className="bunny">
Then the classname appears as expected in the browser.
What could I be doing incorrectly here?
Your help is greatly appreciated.