自定義 React 類名

Question

我正在努力讓我的 css 識別分配給 const statuClass 的各種 css 類。 任何幫助將不勝感激。 下面是我的反應代碼。

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

擺脫模塊，只需調用文件：style.css 並像這樣導入它： import './styles.css';

並使用這樣的代碼：

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