Next.js向React组件传style属性时className显示[object Object]

你的实现思路没问题，是三处基础写法错误导致的异常：

• 组件传参名不匹配：组件定义的接收参数是theme，但父组件调用时写的<CluckHUD props="styles.Moon" />传的属性名是props，组件根本拿不到你预期传入的主题类名；同时你给属性值加了双引号，"styles.Moon"会被解析为普通字符串字面量，而不是CSS Modules导出的实际类名变量。
• className赋值类型错误：JSX的className属性原生只接受字符串、字符串数组类型的输入，你写的className={{...theme}}是把传入值展开为一个普通JS对象，DOM在渲染时会把对象自动序列化为[object Object]，这就是你看到的异常class值的直接原因。
• TS类型定义失效：你给theme参数标注的类型是any，相当于关闭了TS的类型校验，这类传参类型、属性名不匹配的问题本来可以在编译阶段直接被TS拦截报错。

1. 修正父组件的传参写法：属性名和组件入参对齐，去掉类名的引号，直接传入CSS Modules导出的类名变量：

// 父组件调用处
<CluckHUD theme={styles.Moon} />

2. 修正组件内部的className赋值逻辑，去掉错误的对象展开写法，同时补上准确的TS类型，不要用any：

// CluckHUD组件修正后
export default function CluckHUD({ theme }: { theme: string }) {
    return (
        <nav className={theme}>
            <ul className={styles.navbarNav}>
                {/* 其余原有业务逻辑保持不变 */}
            </ul>
        </nav>
    )
}

3. 如果需要给nav标签追加固定的基础类名，直接用模板字符串拼接即可：

// 示例：追加固定的导航基础类
<nav className={`${styles.navBase} ${theme}`}>

如果后续需要做类名的条件判断，直接写逻辑拼接字符串就可以实现，不需要额外依赖第三方工具库。

内容的提问来源于stack exchange，提问作者Aidan Sharp