如何使用 css 模塊將多個類名作為道具傳遞

Question

我似乎無法理解如何使用 css 模塊將具有多個類名的字符串作為道具傳遞？ 我有不同的類，我在任何地方都使用按鈕，所以我有一個類，當它處於活動狀態時，另一個在它不活動時。 我也有不同的配色方案。

按鈕：

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

const Button = (props) => {


  return (
    <button className={`${styles.standardButton} ${styles[props.className]}`}>
      <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 = (props) => {
    setEnteredName(props);
  };
  const companyChangeHandler = (props) => {
    setEnteredCompany(props);
  };
  const locationChangeHandler = (props) => {
    setEnteredLocation(props);
  };
  const textChangeHandler = (props) => {
    setEnteredText(props);
  };
  const projectTypeHandler = (props) => {
    setProjectType(props);
  };

  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={enteredName === "" || enteredCompany === "" || enteredLocation === "" || projectType === "DEFAULT" ? ["isRed", "formButton", "inActive"] : ["isRed", "formButton"]}
          text={"Add Functions"}
        />
    </div>
  );
};

export default CreateJobPage1;

Answer 1

const classNameTest = ['isRed', 'fontColor']
<div className={`${styles.cardWrapper} ${classNameTest.map((item) => {
          return styles[item] + ' '
        })}`}
      >

正如我在上面的評論中提到的， xxx.module.scss中的所有樣式都是為了防止不同樣式文件具有重復的 className，它們會在全局范圍內相互影響。 當你執行styles.isRed時，真正的類名可能是src-pages-YourFileName-module__isRed--SOMEUNIQUECODE

1. 當您嘗試將它們作為道具傳遞時，您仍然需要通過導入styles來訪問它們
2. 當你做一個地圖返回時，你需要在每個return之間有空間所以最后 html 會知道它們是不同的類
3. 我仍然認為通過isActive之類的status來控制組件樣式會更好。 否則這個組件不是真正符合組件的想法