I’ve just started playing with next js. so I want to use css as module and setup classname for nav, but in rendered DOM this classname doesn’t exist. I can see generated styles by webpack in “head” tag, but I dont see classname on my nav tag.
import React from "react"; import styles from './NavigationContainer.module.scss'; type Props = {}; const NavigationContainer: React.FC<Props> = ({children}) => { return <nav className={styles.mainNavigationContainer}>{children}</nav> }; export default NavigationContainer;
Advertisement
Answer
In JS, we cannot use -
as a variable name it is considered as a minus to do the math.
It is a good idea to rename the CSS selector to .mainNavigationContainer
so that the Next Js can get the correct CSS styles.
The JS part will remain the same.
https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css