下一个 js className 尚未设置答案

【问题标题】：next js className haven't been set下一个 js className 尚未设置
【发布时间】：2022-01-02 23:12:44
【问题描述】：

我刚刚开始玩下一个 js。所以我想使用 css 作为模块并为导航设置类名，但是在渲染的 DOM 中这个类名不存在。我可以在“head”标签中看到 webpack 生成的样式，但在我的 nav 标签上看不到类名。

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;

【问题讨论】：

应该是styles.main-navigator-container吧？ CSS 选择器和样式。[name] 应该是一样的，你可以试试这个吗？
看起来像 kebab-case 到 camelCase 问题，请参阅此问题：CSS modules - converting class names to camelCase automatically
@RajendranNadar 它有效。但我只是想知道，这个属性在骆驼箱中的用途是什么。自动完成显示此道具存在
实际上，在 JS 中，我们不能使用 - 作为变量名，它被认为是做数学的减号。不知道为什么自动完成显示它可能从烤肉串转换为驼峰并匹配值？
@RajendranNadar 使用 kebab-case 具有正确的加载器配置 css 名称应自动转换为 camelCase，这样可以遵守 CSS 和 JS 中的命名约定。请参阅我之前评论中链接的问题。

标签： javascript css reactjs next.js

【解决方案1】：

在 JS 中，我们不能使用 - 作为变量名，它被认为是做数学的减号。

最好将 CSS 选择器重命名为 .mainNavigationContainer，以便 Next Js 可以获取正确的 CSS 样式。

JS部分将保持不变。

https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

【讨论】：