如何在Next.js中为CSS组件应用依赖样式？

Next.js的CSS模块会自动为类名添加唯一哈希值，比如你的.error会被编译成类似.error_abc123，.error.glow则变成.error_abc123.glow_def456。直接给DOM添加字符串'glow'时，这个原始类名和编译后的哈希类名不匹配，导致样式无法生效；而直接导入styles.glow并添加的话，会默认把类名加上，不符合“按需动态添加”的需求。

1. 使用React状态动态组合哈希类名 #

通过React状态控制是否添加glow类，将styles.error和styles.glow（均为编译后的哈希类名）动态组合：

import { useState } from 'react';
import styles from './Button.module.css';

export function Button() {
  const [isGlowing, setIsGlowing] = useState(false);

  // 示例：点击按钮切换发光状态
  const toggleGlow = () => setIsGlowing(!isGlowing);

  return (
    <button
      type="button"
      className={`${styles.error} ${isGlowing ? styles.glow : ''}`}
      onClick={toggleGlow}
    >
      Destroy
    </button>
  );
}

2. 通过父组件props控制状态 #

如果需要从外部控制按钮的发光状态，可将状态提升到父组件，通过props传递：

// Button组件
import styles from './Button.module.css';

export function Button({ isGlowing }) {
  return (
    <button
      type="button"
      className={`${styles.error} ${isGlowing ? styles.glow : ''}`}
    >
      Destroy
    </button>
  );
}

// 父组件
import { Button } from './Button';
import { useState } from 'react';

export default function Page() {
  const [isButtonGlowing, setIsButtonGlowing] = useState(false);

  return (
    <div>
      <Button isGlowing={isButtonGlowing} />
      <button onClick={() => setIsButtonGlowing(!isButtonGlowing)}>
        切换发光效果
      </button>
    </div>
  );
}

3. 用clsx库简化类名组合（推荐） #

clsx可以自动过滤无效类名，避免空字符串问题，让代码更简洁：
首先安装clsx：

npm install clsx
# 或
yarn add clsx

修改Button组件：

import clsx from 'clsx';
import styles from './Button.module.css';

export function Button({ isGlowing }) {
  return (
    <button
      type="button"
      className={clsx(styles.error, isGlowing && styles.glow)}
    >
      Destroy
    </button>
  );
}

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