我開始使用香草提取物來設計 NextJS 應用程式的樣式。有沒有辦法在不創建另一個類的情況下從父元素設定子元素的樣式？
我在反應組件中有這樣的結構：
<ul className={styles.ul}>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
在樣式檔案中是這樣的：
import { style } from "@vanilla-extract/css"
export const ul = style({
display: vars.display.flex,
listStyleType: vars.none,
})
uj5u.com熱心網友回復：
您可以&在 css 選擇器的幫助下使用符號，就像nth-child我在下面展示的那樣：
編輯：這段代碼根本不起作用:(
export const ul = style({
display: vars.display.flex,
listStyleType: vars.none,
selectors:{
'& li:nth-child(n)': {
display: vars.display.flex,
}
}
})
事實上，&就像你在 css 中可能知道的那樣代表你的風格。.class-name:nth-child. &class-name在本例中表示。
編輯：正如原版提取檔案所指出的：為了提高可維護性，每個樣式塊只能針對一個元素。要強制執行此操作，所有選擇器都必須以“&”字符為目標，該字符是對當前元素的參考。
例如，'&:hover:not(:active)' 和 [ ${parentClass} &] 被認為是有效的，而 '& a[href]' 和 [ & ${childClass}] 不是。
如果你想定位另一個作用域類，那么它應該在該類的樣式塊中定義。
例如，[ & ${childClass}] 是無效的，因為它不針對“&”，所以它應該在 childClass 的樣式塊中定義。
如果要全域定位當前元素內的子節點（例如'& a[href]'），則應改用 globalStyle。
有用的鏈接：
https : //github.com/seek-oss/vanilla-extract
https://tsh.io/blog/vanilla-extract-library/
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401322.html
下一篇：如何在引導程式中居中對齊輸入組