如果我使用带有.active属性的CSS模块，我应该在className中放什么？

在使用带有 .active 属性的 CSS 模块时，你应该在 className 中放置一个变量，这个变量会根据组件的状态来决定是否应用 .active 类。以下是一个简单的示例：

示例代码

// 假设你有一个 CSS 模块文件 styles.module.css
/* styles.module.css */
.active {
  color: red;
}

// 在你的 React 组件中使用这个 CSS 模块
import React, { useState } from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  const [isActive, setIsActive] = useState(false);

  const toggleActive = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <button onClick={toggleActive}>Toggle Active</button>
      <div className={`${styles.active}${isActive ? ' active' : ''}`}>
        This text will turn red when active.
      </div>
    </div>
  );
};

export default MyComponent;

解释

CSS 模块：styles.module.css 文件定义了一个 .active 类，当应用到元素上时，会使文本颜色变为红色。
React 组件：在 MyComponent 组件中，使用 useState 钩子来管理 isActive 状态。
动态类名：在 className 中，使用模板字符串来动态添加 .active 类。如果 isActive 为 true，则添加 active 类；否则不添加。