I'm in the process of developing a mobile dropdown feature for a React web application.
I am looking for guidance on the proper syntax to use when incorporating multiple classes into a React element. My goal is to apply styles from an imported module while also adjusting the style based on the component's state.
Here is the code snippet I currently have:
<div className={[css.mainNavigation, `${this.state.isActive === true ? 'active' : ''}`].join(' ')}>
</div>
Although the code successfully adds the .active class to my element, the associated styling for .active does not seem to be applied.
In my navbar.module.scss file, the relevant lines of code are as follows:
@media (max-width: 650px) {
.mainNavigation {
display: none;
}
.active {
display: flex;
}
}
My suspicion is that this issue arises from a discrepancy between the class names assigned in my code and those used by the imported scss style module once rendered on the frontend. For example, while I set the classname as
<div className={css.mainNavigation}><div class="_1jGJsP2ItGoSSFd9cLCFqV ">
After activation, it looks like this:
<div class="_1jGJsP2ItGoSSFd9cLCFqV active">
However, the styling specified within my modular.scss file for .active does not reflect in the output.