如何在React Next.js中为组件添加不同样式？

问题原因 #

你的Button组件没有接收并传递外部传入的className属性到内部的<button>元素上，导致外部设置的样式无法生效。另外，由于使用了CSS Modules，需要注意类名的作用域问题。

解决方案 #

方案1：传递并合并外部className #

修改Button组件，接收className props并与组件内部的模块化类名合并：

import styles from "./button.module.css";

const Button = ({ text, className }) => {
  return (
    <div>
      {/* 用模板字符串合并基础类和外部类 */}
      <button className={`${styles.button} ${className}`}>{text}</button>
    </div>
  );
};

export default Button;

然后在全局样式文件（比如globals.css）中定义外部类的样式：

.live {
  background-color: blue;
}

.userAdd {
  background-color: green;
}

方案2：使用组件内部的模块化变体类（推荐，避免全局污染） #

在Button的button.module.css中添加不同样式的变体类：

/* 基础按钮样式 */
.button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

/* 蓝色按钮变体 */
.live {
  background-color: #0071e3;
}

/* 绿色按钮变体 */
.userAdd {
  background-color: #34c759;
}

修改Button组件，通过variant props切换样式：

import styles from "./button.module.css";

const Button = ({ text, variant }) => {
  return (
    <div>
      <button className={`${styles.button} ${styles[variant]}`}>{text}</button>
    </div>
  );
};

export default Button;

在Home组件中使用时传入variant：

import Button from "@/components/button";

function Home() {
  return (
    <div className="home">
      <div className="actions">
        <Button variant="live" text="Go Live"/>
        <Button variant="userAdd" text="Add users"/>
      </div>
    </div>
  );
}

export default Home;

方案3：用clsx库安全合并类名（进阶） #

如果需要处理更复杂的类名组合（比如条件判断类），可以使用clsx库：

1. 安装clsx：

npm install clsx
# 或
yarn add clsx

2. 修改Button组件：

import styles from "./button.module.css";
import clsx from "clsx";

const Button = ({ text, className, variant }) => {
  return (
    <div>
      <button 
        className={clsx(
          styles.button, // 必选基础类
          className, // 可选外部类
          variant && styles[variant] // 可选变体类
        )}
      >
        {text}
      </button>
    </div>
  );
};

export default Button;

这样既支持传入自定义className，也支持通过variant使用内部变体类，同时能处理空值情况，避免无效类名。

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