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.
JavaScript
x
11
11
1
import React from "react";
2
import styles from './NavigationContainer.module.scss';
3
4
type Props = {};
5
6
const NavigationContainer: React.FC<Props> = ({children}) => {
7
return <nav className={styles.mainNavigationContainer}>{children}</nav>
8
};
9
10
export default NavigationContainer;
11
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