主题

React Flow 在构建时就考虑到了深度定制。我们的许多用户完全改变了 React Flow 的外观和感觉，以匹配他们自己的品牌或设计系统。本指南将向您介绍自定义 React Flow 外观的不同方法。

默认样式

React Flow 的默认样式足以使用内置节点。它们为填充、边框半径和动画边缘等样式提供了一些合理的默认值。您可以在下面看到它们的样子：

参考预览：https://codesandbox.io/p/sandbox/condescending-sun-gtmxjy?file=%2FApp.js&utm_medium=sandpack

您通常会通过将这些默认样式导入 App.jsx 文件或其他入口点来加载它们：

import 'reactflow/dist/style.css';

无需深入研究自定义节点和边，您可以通过三种方式来设计 React Flow 的基本外观：

通过样式道具传递内联样式
使用自定义 CSS 覆盖内置类
覆盖 React Flow 使用的 CSS 变量

使用样式属性进行定制

开始自定义流程外观的最简单方法是使用许多 React Flow 组件上的 style 属性来内联您自己的 CSS。

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

重写内置样式

有些人认为大量使用内联样式是一种反模式。在这种情况下，您可以使用自己的 CSS 覆盖 React Flow 使用的内置类。 React Flow 中的各种元素都附加了许多类，但下面列出了您可能想要覆盖的类：

Class 名称	描述
.react-flow	The outermost container
.react-flow__renderer	The inner container
.react-flow__zoompane	Zoom & pan pane
.react-flow__selectionpane	Selection pane
.react-flow__selection	User selection
.react-flow__edges	The element containing all edges in the flow
.react-flow__edge	Applied to each Edge in the flow
.react-flow__edge.selected	Added to an Edge when selected
.react-flow__edge.animated	Added to an Edge when its animated prop is true
.react-flow__edge.updating	Added to an Edge while it gets updated via onEdgeUpdate
.react-flow__edge-path	The SVG `<path />` element of an Edge
.react-flow__edge-text	The SVG `<text />` element of an Edge label
.react-flow__edge-textbg	The SVG `<text />` element behind an Edge label
.react-flow__connection	Applied to the current connection line
.react-flow__connection-path	The SVG `<path />` of a connection line
.react-flow__nodes	The element containing all nodes in the flow
.react-flow__node	Applied to each Node in the flow
.react-flow__node.selected	Added to a Node when selected.
.react-flow__node-default	Added when Node type is "default"
.react-flow__node-input	Added when Node type is "input"
.react-flow__node-output	Added when Node type is "output"
.react-flow__nodesselection	Nodes selection
.react-flow__nodesselection-rect	Nodes selection rect
.react-flow__handle	Applied to each `<Handle />` component
.react-flow__handle-top	Applied when a handle's Position is set to "top"
.react-flow__handle-right	Applied when a handle's Position is set to "right"
.react-flow__handle-bottom	Applied when a handle's Position is set to "bottom"
.react-flow__handle-left	Applied when a handle's Position is set to "left"
.react-flow__handle-connecting	Applied when a connection line is above a handle.
.react-flow__handle-valid	Applied when a connection line is above a handle and the connection is valid
.react-flow__background	Applied to the `<Background />` component
.react-flow__minimap	Applied to the `<MiniMap />` component
.react-flow__controls	Applied to the `<Controls />` component

注意

如果您在源代码中寻找其他要重写的样式，请务必小心。有些类在内部使用，并且是库正常运行所必需的。如果您替换它们，您可能会遇到意想不到的错误或错误！

第三方解决方案

您可以选择完全退出 React Flow 的默认样式并使用第三方样式解决方案。如果您想执行此操作，则必须确保仍导入基本样式。

import 'reactflow/dist/base.css';

注意

这些基本样式是 React Flow 正常运行所必需的。如果您不导入它们或使用自己的样式覆盖它们，某些功能可能无法按预期工作！

参考预览：https://codesandbox.io/p/sandbox/nostalgic-snow-dn64m6?file=%2FApp.js&utm_medium=sandpack

样式组件

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

import { MiniMap } from 'reactflow';
 
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 'reactflow/dist/style.css';
import 'tailwind.css';

有关将 Tailwind 与 React Flow 结合使用的完整示例，请查看示例！

默认样式​

使用样式属性进行定制​

第三方解决方案​

样式组件​

TailwindCSS​

默认样式

使用样式属性进行定制

第三方解决方案

样式组件

TailwindCSS