Some CSS Class selectors don't work in React - css

Question

I'm working on some basic styling for my personal project, and for some reason, most of the class selectors in my css file Header.css works, except headerOptionCount. Earlier, some other classes weren't working, but putting Header.css in a styles directory seemed to help, but now it is happening again. When changing margin-left and margin-right of headerOptionCount, nothing changes. When inspecting the element in dev tools, the styles dont show up at all.
Header.css:
.header {
height: 60px;
display: flex;
align-items: center;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
}
.headerLogo {
width: 60px;
object-fit: contain;
margin: 0 10px;
}
.headerSearch {
display: flex;
flex: 1;
align-items: center;
border-radius: 24px;
}
.headerSearchInput {
width: 100%;
height: 12px;
padding: 10px;
border: none;
}
.headerSearchIcon {
padding: 5px;
height: 22px !important;
background-color: tomato;
}
.headerOptionLineOne {
font-size: 10px;
}
.headerOptionLineTwo {
font-size: 13px;
font-weight: 800;
}
.headerOptionBasket {
display: flex;
align-items: center;
color: white;
}
.headerOptionCount {
margin-left: 10px;
margin-right: 10px;
}
.headerNav {
display: flex;
justify-content: space-evenly;
}
.headerOption {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-right: 10px;
color: white;
}
Here is my Header component that imports this css file.
Header.js:
import React from "react";
import logo from "../zipshopIcon.png";
import { Search, ShoppingCart } from "#material-ui/icons";
import "../styles/Header.css";
const Header = () => {
return (
<div className="header">
<img className="headerLogo" src={logo} alt="Logo" />
<div className="headerSearch">
<input className="headerSearchInput" type="text" />
{/* Logo */}
<Search className="headerSearchIcon" />
</div>
<div className="headerNav">
<div className="headerOption">
<span className="headerOptionLineOne">Hello Guest</span>
<span className="headerOptionLineTwo">Sign In</span>
</div>
<div className="headerOption">
<span className="headerOptionLineOne">Returns</span>
<span className="headerOptionLineTwo">& Orders</span>
</div>
<div className="headerOption">
<span className="headerOptionLineOne">Your</span>
<span className="headerOptionLineTwo">Prime</span>
</div>
<div className="headerOptionBasket">
<ShoppingCart />
<span className="headerOptionTwo headerBasketCount">0</span>
</div>
</div>
</div>
);
};
export default Header;
The import directory is definitely correct since the other styles work. I've tried using css modules, but it didnt fix anything. Should i try using scss? it just baffles me why class selectors cant even work when imported as css files. Any advice would be appreciated, thanks!

Answer 1

None of your elements in the js have the classname headerOptionCount, you need to give the element you want to have those styles the classname for it to work.