主题

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` 被选中时，会添加到 `Edge` 中。
`.react-flow__edge.animated`	当 `Edge` 的 `animated` 属性为 `true` 时，会添加到 `Edge` 中。
`.react-flow__edge.updating`	当 `Edge` 通过 `onReconnect` 更新时，会添加到 `Edge` 中。
`.react-flow__edge-path`	SVG 的 `<path />` 元素，属于 `Edge`。
`.react-flow__edge-text`	SVG 的 `<text />` 元素，属于 `Edge` 标签。
`.react-flow__edge-textbg`	SVG 的 `<text />` 元素，位于 `Edge` 标签的后面。
`.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`	当句柄的 `Position` 设置为 `"top"` 时应用。
`.react-flow__handle-right`	当句柄的 `Position` 设置为 `"right"` 时应用。
`.react-flow__handle-bottom`	当句柄的 `Position` 设置为 `"bottom"` 时应用。
`.react-flow__handle-left`	当句柄的 `Position` 设置为 `"left"` 时应用。
`.connectingfrom`	当连接线位于句柄之上时，添加到句柄。
`.connectingto`	当连接线位于句柄之上时，添加到句柄。
`.valid`	当连接线位于句柄之上并且连接有效时，添加到句柄。
`.react-flow__background`	应用于 `<Background />` 组件。
`.react-flow__minimap`	应用于 `<MiniMap />` 组件。
`.react-flow__controls`	应用于 `<Controls />` 组件。

⚠️

如果您深入研究源代码以寻找其他要覆盖的类，请小心。一些类在内部使用，是库正常运行所必需的。如果您替换它们，您可能会遇到意想不到的错误或错误！

第三方解决方案

您可以选择完全不使用 React Flow 的默认样式，而是使用第三方样式解决方案。如果您想这样做，您必须确保您仍然导入了基本样式。

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

⚠️

这些基本样式是 React Flow 正确运行的 **必需** 条件。如果您没有导入它们，或者用自己的样式覆盖了它们，一些功能可能无法按预期工作！

样式化组件

您直接渲染的许多组件，例如 <MiniMap />，都接受 className 和 style 属性。这意味着您可以使用任何您喜欢的样式解决方案，例如样式化组件

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;
  }
`;

有关使用样式化组件和 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 Flows 基本样式之后导入 Tailwinds 入口点。

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

有关使用 Tailwind 和 React Flow 的完整示例，请查看示例！

快速入门幻灯片应用程序

主题