如何通过CSS Modules传递多个className作为React组件Props

你的核心问题在于Button组件没有正确处理传入的多类名数组，同时CSS Modules要求每个类名都必须通过styles[类名]映射后才能使用。以下是具体的修复方案：

问题分析 #

1. 父组件传递给Button的className是数组（比如["isRed", "formButton", "inActive"]），但原Button组件尝试直接用styles[props.className]——数组作为styles对象的键会返回undefined，导致类名无效。
2. 原组件只支持单个类名，无法处理多个类名的组合。

修复后的Button组件 #

修改组件使其支持接收数组或字符串类型的类名，并自动映射到CSS Modules的样式：

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

const Button = (props) => {
  // 初始化类名数组，先加入默认样式
  const classList = [styles.standardButton];

  // 处理传入的自定义类名
  if (props.className) {
    // 统一转成数组处理，兼容字符串和数组两种传参方式
    const customClasses = Array.isArray(props.className) ? props.className : [props.className];
    // 遍历每个类名，映射到CSS Modules的样式后加入数组
    customClasses.forEach(cls => {
      if (styles[cls]) classList.push(styles[cls]);
    });
  }

  return (
    <button className={classList.join(" ")}>
      <h1>{props.text}</h1>
    </button>
  );
};

export default Button;

更简洁的写法（可选） #

用数组扩展和映射简化逻辑：

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

const Button = (props) => {
  const combinedClasses = [
    styles.standardButton,
    // 处理自定义类名：转数组→映射样式→过滤无效值
    ...(Array.isArray(props.className) ? props.className : [props.className])
      .map(cls => styles[cls])
      .filter(Boolean)
  ].join(" ");

  return (
    <button className={combinedClasses}>
      <h1>{props.text}</h1>
    </button>
  );
};

export default Button;

优化父组件的类名传递 #

可以把按钮激活状态的判断逻辑抽离，让代码更清晰：

import React, { useState } from "react";

import Input from "../input/Input";
import Select from "../input/Select";
import Button from "../input/Button";

const CreateJobPage1 = (props) => {
  const [enteredName, setEnteredName] = useState("");
  const [enteredCompany, setEnteredCompany] = useState("");
  const [enteredLocation, setEnteredLocation] = useState("");
  const [enteredText, setEnteredText] = useState("");
  const [projectType, setProjectType] = useState('DEFAULT');

  const projectTypes = ["shortfilm", "fiction", "commercial", "arthouse", "animation"];

  const nameChangeHandler = (value) => setEnteredName(value);
  const companyChangeHandler = (value) => setEnteredCompany(value);
  const locationChangeHandler = (value) => setEnteredLocation(value);
  const textChangeHandler = (value) => setEnteredText(value);
  const projectTypeHandler = (value) => setProjectType(value);

  // 抽离按钮禁用状态判断
  const isButtonInactive = enteredName === "" || enteredCompany === "" || enteredLocation === "" || projectType === "DEFAULT";

  return (
    <div>
        <Input
          placeholder="What's the project name?"
          enteredValue={enteredName}
          onChange={nameChangeHandler}
        />
        <Input
          placeholder="What's the production company?"
          enteredValue={enteredCompany}
          onChange={companyChangeHandler}
        />
        <Input
          placeholder="Where's the project located?"
          enteredValue={enteredLocation}
          onChange={locationChangeHandler}
        />
        <Select
          placeholder="Choose project type"
          options={projectTypes}
          value={projectType}
          onChangeOption={projectTypeHandler}
        />
        <Input
          placeholder="What's the project about?"
          enteredValue={enteredText}
          onChange={textChangeHandler}
          formulaType="textarea"
        />
        <Button
          className={["isRed", "formButton", ...(isButtonInactive ? ["inActive"] : [])]}
          text="Add Functions"
        />
    </div>
  );
};

export default CreateJobPage1;

关键要点 #

• CSS Modules的类名必须通过styles[类名]访问，直接写字符串类名会失效
• 组件要兼容多种传参形式（单个字符串/数组），提升复用性
• 用数组存储类名后join(' ')是React中组合多类名的常用方式

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