How to pass multiple classNames as props with css modules

Question

I can't seem to understand how to pass a string with multiple classNames as a prop using css modules? I have different classes i use everywhere for the button, and so i have on class for when it's active, and another when it's inactive. I also have different color schemes i pass.

Button:

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;

And here is the page which uses the button. The button function is at the bottom, and some input fields needs to be filled out in order for it to be "active".

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] + ' '
        })}`}
      >

As I mentioned above in the comment, all the styles in xxx.module.scss is mean to prevent different style files have duplicate className and they will effect each other globally. when you do styles.isRed the REAL class name will likely to be src-pages-YourFileName-module__isRed--SOMEUNIQUECODE

1. when you try to pass them as props, u still need to access them by import styles
2. when you do a map return u need to have space between each return so at the end html will know they are different class
3. I still think is better to pass the status like isActive to control the component style. otherwise this component is not really fit the idea of a component