CSS 未检索到模块值

Question

我在我的 React 应用程序中使用 CSS 模块。根据道具值，如果它是蓝色或白色，我想使用来自“样式”导入的受人尊敬的 class。但是，当我运行代码并检查 p 元素时，我看到 class 名称显示为“styles.blue-text”，但它的值不是从相关的 css 文件。为什么不应用它，尽管 class 名称已正确获取。

import React,{useEffect, useState} from "react"
import DarkBlueRightArrow from "../../../resources/images/shared/darkblue-right-arrow.svg"
import styles from "./LeftSidedCircularDarkBlueArrowButton.module.css"


const LeftSidedCircularDarkBlueArrowButton = props => {

  const [color,setColor] = useState("")

  useEffect(() => {
      if(props.color === "white")
        setColor("styles.white-text")
      if (props.color === "blue")
        setColor("styles.blue-text")
  });

  return (
    <a href={props.detailLink}>
      <div className="d-flex align-items-center justify-content-ceter">
        <img className={styles.icon} src={DarkBlueRightArrow} alt="" />
        <p className={color}>{props.text}</p>
      </div>
    </a>
  )
}

export default LeftSidedCircularDarkBlueArrowButton

Answer 1

- 与点对象表示法一起使用时无效。您必须改用括号表示法。

另外state可以用props计算的时候就不需要了

...
const LeftSidedCircularDarkBlueArrowButton = props => {

  /* const [color,setColor] = useState("") */

  /* useEffect(() => {
      if(props.color === "white")
        setColor("styles.white-text")
      if (props.color === "blue")
        setColor("styles.blue-text")
  }); */

 const color = props.color === "white" ? styles['white-text'] : styles['blue-text']

  return (
    <a href={props.detailLink}>
      <div className="d-flex align-items-center justify-content-ceter">
        <img className={styles.icon} src={DarkBlueRightArrow} alt="" />
        <p className={color}>{props.text}</p>
      </div>
    </a>
  )
}
...

这就是为什么 CSSModules 更喜欢用驼峰命名法命名 class 名称，以避免使用方括号。

CSS 未检索到模块值

CSS Modules Value is not retrieved

reactjs

css-modules

react-css-modules