Svelte樣式

自訂屬性

你可以將 CSS 自訂屬性 (靜態和動態) 傳遞給元件

<Slider
	bind:value
	min={0}
	max={100}
	--track-color="black"
	--thumb-color="rgb({r} {g} {b})"
/>

上面的程式碼基本上會解糖為這樣

<svelte-css-wrapper style="display: contents; --track-color: black; --thumb-color: rgb({r} {g} {b})">
	<Slider
		bind:value
		min={0}
		max={100}
	/>
</svelte-css-wrapper>

對於 SVG 元素，它會改用 <g>

<g style="--track-color: black; --thumb-color: rgb({r} {g} {b})">
	<Slider
		bind:value
		min={0}
		max={100}
	/>
</g>

在元件內部，我們可以讀取這些自訂屬性（並使用 var(...) 提供後備值）

<style>
	.track {
		background: var(--track-color, #aaa);
	}

	.thumb {
		background: var(--thumb-color, blue);
	}
</style>

你不必直接在元件上指定值；只要自訂屬性定義在父元素上，元件就可以使用它們。通常會在全域樣式表中的 :root 元素上定義自訂屬性，以便它們套用到你的整個應用程式。

雖然額外的元素不會影響版面配置，但會影響任何使用 (例如) > 組合器來鎖定元件容器內元素的 CSS 選擇器。

在 GitHub 上編輯此頁面

全域樣式巢狀 <style> 元素