next js className haven’t been set

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;

JavaScript
​x
 
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;
​

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

Advertisement

Answer