Currently working on a React project that involves using Webpack. I am adding some styles in my style.css file and importing it into components with the line import style from './style.css';. Interestingly, elements like body and div get styled properly without selectors. However, I am encountering difficulties when trying to style classes.
For instance, I set the className with
<div className='foo'>foo div</div>This is the CSS code used:
.foo {
height: 250px;
width: 250px;
background-color: blue !important;
}
body {
background-color: red;
}
While the red background color correctly applies to the body, the .foo div does not receive any styling. When checking out the foo div in DevTools, its class name (
<div class="foo">foo div</div>.foo {
height: 250px;
width: 250px;
background-color: blue !important;
}
body {
background-color: red;
}
I have been struggling to solve this issue for quite some time now, experimenting with various solutions. It seems that while all DOM elements are style-able, as soon as I attempt to target specific selectors, nothing gets applied...