自定义 React 类名

Question

I am struggling in trying to get my css to recognize the various css classes assigned to the const statuClass. Any help will be really appreciated. Below is my react code.

import React from "react";
import classes from "./TestLetter.module.css";

const TestLetter = ({ individualLetterInfo }) => {
  const { status } = individualLetterInfo;

  const statusClass = {
    correct: "test-letter-correct",
    Incorrect: "test-letter-incorrect",
    notAttempred: "test-letter-not-attempted",
  }[status];

  return (
    <span className={`${classes["test-letter"]} ${statusClass}`}>
      {individualLetterInfo.testLetter}
    </span>
  );
};

export default TestLetter; 

TestLetter.module.css

.test-letter {
  font-size: 19px;
  line-height: 19px;
}

.test-letter-correct {
  color: #558b2f;
}

.test-letter-incorrect {
  color: #bf360c;
}

.test-letter-not-attempted {
  color: #f9a825;
}

Answer 1

Get rid of the module, just call the file: style.css and import it like this: import './styles.css';

and use the code like this:

 <span className={`test-letter ${statusClass}`}>...</span>