我在我的反應應用程式中使用 CSS 模塊。根據道具值，如果它是藍色或白色，我想使用“樣式”匯入中受人尊敬的類。但是，當我運行代碼并檢查 p 元素時，我看到類名顯示為例如“styles.blue-text”，但它的值不是從相關的 css 檔案中檢索到的。為什么不應用它，盡管類名已正確獲取。
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
uj5u.com熱心網友回復：
-與點物件表示法一起使用時無效。您必須改用括號表示法。
當可以使用道具計算時，也不需要狀態。
...
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 更喜歡用 camelCase 命名類名的原因，以避免使用括號表示法。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/415567.html
標籤：
上一篇：Axios多個then的
下一篇：在gatsby中重新渲染組件