全域樣式
:global(...)
若要將樣式全域套用至單一選取器，請使用 :global(...) 修飾符。
<style>
:global(body) {
/* applies to <body> */
margin: 0;
}
div :global(strong) {
/* applies to all <strong> elements, in any component,
that are inside <div> elements belonging
to this component */
color: goldenrod;
}
p:global(.big.red) {
/* applies to all <p> elements belonging to this component
with `class="big red"`, even if it is applied
programmatically (for example by a library) */
}
</style>若要建立可全域存取的 @keyframes，您需要在關鍵影格名稱前加上 -global-。
編譯時會移除 -global- 部分，然後關鍵影格將會在程式碼的其他位置僅使用 my-animation-name 參照。
<style>
@keyframes -global-my-animation-name {
/* code goes here */
}
</style>:global
若要將樣式全域套用至一組選取器，請建立 :global {...} 區塊。
<style>
:global {
/* applies to every <div> in your application */
div { ... }
/* applies to every <p> in your application */
p { ... }
}
.a :global {
/* applies to every `.b .c .d` element, in any component,
that is inside an `.a` element in this component */
.b .c .d {...}
}
</style>上方的第二個範例也可以寫成等效的
.a :global .b .c .d選取器，其中:global之後的所有內容都不受範圍限制，不過建議使用巢狀形式。