When I chain selectors in a CSS file, the styles don't seem to apply as expected. I'm importing the styles into the component and it only applies for the main class. For example:
import styles from './Home.module.css'
const Home = () => {
return (
<header className={styles.header}>
<div className={styles.headerContainer}>
...
In my Home.module.css file, I have the following:
.header {
// some styles that are getting applied
}
.header .headerContainer {
//some styles that don't show up
}
On the page, I see the header styled but not the headerContainer. It seems that Next.js automatically adds variables to the end of classes when passing styles items to JSX. I'm trying to figure out how to properly chain selectors in CSS and use styles in this way in Next.js.