主題化

React Flow 的設計初衷是深度客製化。許多使用者完全改變 React Flow 的外觀和風格，以符合他們自己的品牌或設計系統。本指南將向您介紹自訂 React Flow 外觀的不同方法。

預設樣式

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

您通常會將這些預設樣式匯入您的 App.jsx 檔案或其他進入點

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

在不深入研究自訂節點和邊緣的情況下，有三種方式可以設定 React Flow 基本外觀的樣式

透過 style 屬性傳遞行內樣式
使用自訂 CSS 覆寫內建類別
覆寫 React Flow 使用的 CSS 變數

內建深色和淺色模式

您可以透過使用 colorMode 屬性（「dark」、「light」或「system」）來選擇其中一種內建色彩模式，如深色模式範例所示。

import ReactFlow from '@xyflow/react';
 
export default function Flow() {
  return <ReactFlow colorMode="dark" nodes={[...]} edges={[...]} />
}

當您使用 colorMode 屬性時，React Flow 會在根元素（.react-flow）新增一個類別，您可以使用該類別根據色彩模式設定流程圖的樣式

.dark .react-flow__node {
  background: #777;
  color: white;
}
 
.light .react-flow__node {
  background: white;
  color: #111;
}

使用 `style` 屬性自訂

開始自訂流程圖外觀和風格的最簡單方法是使用 React Flow 許多元件上的 style 屬性，來行內設定您自己的 CSS。

import ReactFlow from '@xyflow/react'
 
const styles = {
  background: 'red',
  width: '100%',
  height: 300,
};
 
export default function Flow() {
  return <ReactFlow style={styles} nodes={[...]} edges={[...]} />
}

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)`

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

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

⚠️

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

覆寫內建類別

有些人認為大量使用行內樣式是一種反模式。在這種情況下，您可以使用自己的 CSS 覆寫 React Flow 使用的內建類別。React Flow 中有許多類別附加到各種元素，但您可能想要覆寫的類別如下所示

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

⚠️

如果您在原始碼中尋找要覆寫的其他類別，請小心。某些類別在內部使用，是函式庫正常運作所必需的。如果您取代它們，可能會導致意想不到的錯誤！

第三方解決方案

您可以選擇完全不使用 React Flow 的預設樣式，而改用第三方樣式解決方案。如果您想這樣做，您必須確保仍然匯入基本樣式。

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

⚠️

這些基本樣式是 React Flow 正常運作所 **必需的**。如果您不匯入它們或用您自己的樣式覆寫它們，某些東西可能無法如預期般運作！

Styled Components

您直接渲染的許多元件，例如 <MiniMap />，都接受 className 和 style 屬性。這表示您可以使用任何您喜歡的樣式解決方案，例如 Styled Components

import { MiniMap } from '@xyflow/react';
 
const StyledMiniMap = styled(MiniMap)`
  background-color: ${(props) => props.theme.bg};
 
  .react-flow__minimap-mask {
    fill: ${(props) => props.theme.minimapMaskBg};
  }
 
  .react-flow__minimap-node {
    fill: ${(props) => props.theme.nodeBg};
    stroke: none;
  }
`;

如需使用 Styled Components 和 React Flow 的完整範例，請查看此範例！

TailwindCSS

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

function CustomNode({ data }) {
  return (
    <div className="px-4 py-2 shadow-md rounded-md bg-white border-2 border-stone-400">
      <div className="flex">
        <div className="rounded-full w-12 h-12 flex justify-center items-center bg-gray-100">
          {data.emoji}
        </div>
        <div className="ml-2">
          <div className="text-lg font-bold">{data.name}</div>
          <div className="text-gray-500">{data.job}</div>
        </div>
      </div>
 
      <Handle
        type="target"
        position={Position.Top}
        className="w-16 !bg-teal-500"
      />
      <Handle
        type="source"
        position={Position.Bottom}
        className="w-16 !bg-teal-500"
      />
    </div>
  );
}

⚠️

如果您想要覆寫預設樣式，請確保在 React Flow 的基本樣式之後匯入 Tailwind 的進入點。

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

如需使用 Tailwind 和 React Flow 的完整範例，請查看此範例！

快速入門投影片應用程式

主題化