As I dive into creating a registration page in ReactJS, I encounter a frustrating issue with my styles not applying correctly from the styles.css file.
Let's take a look at my RegisterPage.jsx component:
export default function RegisterPage() {
return (
<>
<div className="row g-0">
<div className="col-7 background">Background</div>
<div className="col-5 registerForm">RegisterForm</div>
</div>
</>
)
}
And here are the styles defined in my styles.css:
body{
background: #cccaaa;
}
.background{
background: "#8d45b7";
}
.registerForm{
background: "#fff";
height: 100vh;
}
I've made sure to include my styles.css in my index.html file:
<!-- My CSS -->
<link type="text/css" href="./src/styles.css" rel="stylesheet">
However, only the body style seems to be applied correctly, as seen here:
body{
background: #cccaaa;
}
The classes-based styles like .background and .registerForm don't work unless I apply them directly within the component, like this for the RegisterForm:
export default function RegisterPage() {
return (
<>
<div className="row g-0">
<div className="col-7">Background</div>
<div
className="col-5"
style={{
background: "#fff",
height: "100vh",
}}>
RegisterForm
</div>
</div>
</>
)
}
Ultimately, I aim to define all my styles in styles.css rather than in each individual component. What could be causing this hiccup?