主題設定

Svelte Flow 具有最少的預設樣式，並且被設計為完全可自訂。我們的許多用戶完全改變了 Svelte Flow 的外觀和感覺，以匹配他們自己的品牌或設計系統。本指南將向您介紹您可以自訂 Svelte Flow 外觀的不同方式。

預設樣式

Svelte Flow 的預設樣式足以開始使用內建節點。它們為樣式（例如內邊距、邊框半徑和動畫邊緣）提供了一些合理的預設值。您可以在下面看到它們的外觀

import '@xyflow/svelte/dist/style.css';

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

唯讀

基礎樣式

如果您只想載入 Svelte Flow 運作所需的非常基本的樣式，您可以改為匯入基礎樣式

import '@xyflow/svelte/dist/base.css';

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

唯讀

自訂

您可以使用不同的方法來自訂 Svelte Flow 的外觀

在您的自訂節點和邊緣中使用範圍 CSS
使用自訂 CSS 覆寫內建類別
覆寫 Svelte Flow 使用的 CSS 變數
透過 style 屬性傳遞行內樣式

使用內建類別

如果您想要覆寫預設樣式，您可以透過覆寫內建 CSS 類別來執行此操作。您可以在下方找到 Svelte Flow 使用的所有類別清單

類別名稱	描述
`.svelte-flow`	最外層容器
`.svelte-flow__renderer`	內部容器
`.svelte-flow__zoompane`	縮放和平移窗格
`.svelte-flow__selectionpane`	選取窗格
`.svelte-flow__selection`	使用者選取
`.svelte-flow__edges`	包含流程中所有邊緣的元素
`.svelte-flow__edge`	套用至流程中的每個 `Edge`
`.svelte-flow__edge.selected`	當選取 `Edge` 時加入
`.svelte-flow__edge.animated`	當 `Edge` 的 `animated` 屬性為 `true` 時加入
`.svelte-flow__edge-path`	`Edge` 的 SVG `<path />` 元素
`.svelte-flow__edge-label`	邊緣標籤
`.svelte-flow__connection`	套用至目前的連線線條
`.svelte-flow__connection-path`	連線線條的 SVG `<path />`
`.svelte-flow__nodes`	包含流程中所有節點的元素
`.svelte-flow__node`	套用至流程中的每個 `Node`
`.svelte-flow__node.selected`	當選取 `Node` 時加入。
`.svelte-flow__node-default`	當 `Node` 類型為 `"default"` 時加入
`.svelte-flow__node-input`	當 `Node` 類型為 `"input"` 時加入
`.svelte-flow__node-output`	當 `Node` 類型為 `"output"` 時加入
`.svelte-flow__node-group`	當 `Node` 類型為 `"group"` 時加入
`.svelte-flow__nodesselection`	節點選取
`.svelte-flow__nodesselection-rect`	節點選取矩形
`.svelte-flow__handle`	套用至每個 `<Handle />` 元件
`.svelte-flow__handle-top`	當控制點的 `Position` 設定為 `"top"` 時套用
`.svelte-flow__handle-right`	當控制點的 `Position` 設定為 `"right"` 時套用
`.svelte-flow__handle-bottom`	當控制點的 `Position` 設定為 `"bottom"` 時套用
`.svelte-flow__handle-left`	當控制點的 `Position` 設定為 `"left"` 時套用
`.svelte-flow__handle.connecting`	當連線線條位於控制點上方時套用。
`.svelte-flow__handle.valid`	當連線線條位於控制點上方且連線有效時套用
`.svelte-flow__background`	套用至 `<Background />` 元件
`.svelte-flow__minimap`	套用至 `<MiniMap />` 元件
`.svelte-flow__controls`	套用至 `<Controls />` 元件

⚠️

如果您在原始碼中搜尋其他要覆寫的類別時要小心。有些類別在內部使用，是函式庫正常運作所必需的。如果您替換它們，可能會導致意外的錯誤！

CSS 變數

如果您不想完全替換預設樣式，而只想調整整體外觀和感覺，您可以覆寫我們在整個函式庫中使用的一些 CSS 變數。

這些變數大多是不言自明的。以下是一個表格，列出您可能想要調整的所有變數及其預設值，以供參考

變數名稱	預設
`--xy-edge-stroke-default`	`#b1b1b7`
`--xy-edge-stroke-width-default`	`1`
`--xy-edge-stroke-selected-default`	`#555`
`--xy-connectionline-stroke-default`	`#b1b1b7`
`--xy-connectionline-stroke-width-default`	`1`
`--xy-attribution-background-color-default`	`rgba(255, 255, 255, 0.5)`
`--xy-minimap-background-color-default`	`#fff`
`--xy-background-pattern-dot-color-default`	`#91919a`
`--xy-background-pattern-line-color-default`	`#eee`
`--xy-background-pattern-cross-color-default`	`#e2e2e2`
`--xy-node-color-default`	`inherit`
`--xy-node-border-default`	`1px solid #1a192b`
`--xy-node-background-color-default`	`#fff`
`--xy-node-group-background-color-default`	`rgba(240, 240, 240, 0.25)`
`--xy-node-boxshadow-hover-default`	`0 1px 4px 1px rgba(0, 0, 0, 0.08)`
`--xy-node-boxshadow-selected-default`	`0 0 0 0.5px #1a192b`
`--xy-handle-background-color-default`	`#1a192b`
`--xy-handle-border-color-default`	`#fff`
`--xy-selection-background-color-default`	`rgba(0, 89, 220, 0.08)`
`--xy-selection-border-default`	`1px dotted rgba(0, 89, 220, 0.8)`
`--xy-controls-button-background-color-default`	`#fefefe`
`--xy-controls-button-background-color-hover-default`	`#f4f4f4`
`--xy-controls-button-color-default`	`inherit`
`--xy-controls-button-color-hover-default`	`inherit`
`--xy-controls-button-border-color-default`	`#eee`
`--xy-controls-box-shadow-default`	`0 0 2px 1px rgba(0, 0, 0, 0.08)`

這些變數用於定義 Svelte Flow 各個元素的預設值。這表示它們仍然可以透過行內樣式或每個元素的自訂類別來覆寫。如果您想要覆寫變數，您可以透過加入

.svelte-flow {
  --xy-node-background-color-default: #ff5050;
}

⚠️

請注意，這些變數定義在 .svelte-flow 和 :root 下。

Tailwind

TailwindCSS

自訂節點和邊緣只是 Svelte 元件，您可以使用任何您喜歡的樣式解決方案來設計它們的樣式。例如，您可能想要使用 Tailwind 來設計節點的樣式

<script lang="ts">
  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
  type $$Props = NodeProps;
  export let data: $$Props['data'];
</script>
 
<div class="px-4 py-2 shadow-md rounded-md bg-white border-2 border-stone-400">
  <div class="flex">
    <div class="rounded-full w-12 h-12 flex justify-center items-center bg-gray-100">
      {data.emoji}
    </div>
    <div class="ml-2">
      <div class="text-lg font-bold">{data.name}</div>
      <div class="text-gray-500">{data.job}</div>
    </div>
  </div>
  <Handle
    type="target"
    position={Position.Top}
    class="w-16 !bg-teal-500 rounded-none border-none"
  />
  <Handle
    type="source"
    position={Position.Bottom}
    class="w-16 !bg-teal-500 rounded-none border-none"
  />
</div>

⚠️

如果您想要覆蓋預設樣式，請務必在 Svelte Flow 的基本樣式之後匯入 Tailwind 的進入點。

import '@xyflow/svelte/dist/style.css';
import 'tailwind.css';

如需在 Svelte Flow 中使用 Tailwind 的完整範例，請查看tailwind 範例！

子流程