我正在做一個反應專案并遇到了這個問題。我正在將我的自定義類名${row.customClass}傳遞給組件，并且我正在嘗試設定與下面 CSS 部分中所示相同的樣式。當我檢查開發人員工具時，我可以看到類示例已添加到其他類中，如 HTML 部分所示。但該樣式并未應用于自定義類示例。所有其他樣式都得到應用。誰能告訴我怎么了？
return (
<tr key={index}>
{
rows.map((row, index) => {
return <td key={index} className={`${classes.row} ${!row.status ? classes.disableRow : ""
}${row.customClass}`}> <customComponent></customComponent></td>
})
}
</tr>
)
CSS
const useStyles = makeStyles(
(theme) => ({
row: {
padding: "10px",
"& span": {
wordBreak:"break-all"
}
},
disableRow: {
color: "grey"
},
sample:{
background:"red",
}
})
);
HTML
<td class="makeStyles-row-42 sample"> <span>Data123</span></td>
uj5u.com熱心網友回復：
您將鍵“sample”傳遞給 classNames，而不是將與您使用 makeStyles 創建的類關聯的鍵傳遞給它。
例如看看你添加的其他類，你做
${classes.row}
不是
${'row'}
如果你想在你的 makeStyles 中獲得與“sample”相關的類，你需要這樣做：
rows.map((row, index) => {
return <td key={index} className={`${classes.row} ${!row.status ? classes.disableRow : ""
}${classes[row.customClass]}`}> <customComponent></customComponent></td>
})
}
其中 row.customClass 需要是 'sample'
uj5u.com熱心網友回復：
我認為你的問題是你錯過了空間。嘗試在 ${!row.status 之間添加空格？classes.disableRow : ""} 和 ${classes[row.customClass]}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/381487.html
標籤：javascript html css 反应 打字稿