我有以下樣式的組件，我試圖將一個 prop 傳遞給它并在偽元素選擇器中使用它，在這種情況下before。但是，它沒有按預期作業。
但是，如果我將相同的道具傳遞給背景 css 屬性或任何其他屬性，則它完全可以正常作業
使用樣式組件時是否允許以下??內容？
const Label = styled.label`
/* This did not work */
&::before {
content: ${(props) => (props.field ? "Hi" : "")};
}
/*But this works perfectly fine*/
background: ${(props) => (props.field ? "palevioletred" : "white")};
`;
const Input = styled.input`
height: 32px;
`;
uj5u.com熱心網友回復：
如果您檢查 devtools，您會看到您的 CSS 規則正在將其添加到 DOM，但它是該content屬性的無效值。它是原始文本，沒有引號：Hi。它需要是"Hi"。
嘗試這樣做（注意新模板字串文字的反引號）：
content: ${(props) => (props.field ? `"Hi"` : "")};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386900.html
上一篇：粘性導航欄可變大小改變滾動位置