主题

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 Flows 的基本样式后导入 Tailwinds 的入口点。

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

有关使用 Tailwind 与 Svelte Flow 的完整示例，请查看 tailwind 示例！

子流程