I am facing a problem with styling two div containers using CSS imported from a separate file. The first style is applied successfully using the className property, but the second one is not working as expected. Despite having defined the 'sales' class in the CSS file, it is not being picked up.
dashboard.js
import HomeSalesmanStyles from '../../../styles/SalesmanHome.module.css';
const HomeSalesman = ({name}) => {
return(
<>
<div className={HomeSalesmanStyles.container}>
<h4>
Hello, {name} 👋
</h4>
</div>
<div className={HomeSalesmanStyles.sales}>
Hello
</div>
</>
)
};
export default HomeSalesman;
SalesmanHome.module.css
.container {
display: flex;
justify-content: center;
margin-top: 5%;
};
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
Any suggestions on how to resolve this issue?
----------- Edit ------------ The problem was due to an incorrect CSS module name import! Once corrected to the right file, everything worked perfectly.