主题

🌐 Theming

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

🌐 React Flow has been built with deep customization in mind. Many of our users fully transform the look and feel of React Flow to match their own brand or design system. This guide will introduce you to the different ways you can customize React Flow’s appearance.

默认样式

🌐 Default styles

React Flow 的默认样式足以让内置节点开始使用。它们为样式提供了一些合理的默认值，例如内边距、边框圆角和动画边缘。你可以在下面看到它们的样子：

🌐 React Flow’s default styles are enough to get going with the built-in nodes. They provide some sensible defaults for styles like padding, border radius, and animated edges. You can see what they look like below:

import React, { useCallback } from 'react';
import {
  ReactFlow,
  Background,
  Controls,
  MiniMap,
  useNodesState,
  useEdgesState,
  addEdge,
  Position,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
 
const nodeDefaults = {
  sourcePosition: Position.Right,
  targetPosition: Position.Left,
};
 
const initialNodes = [
  {
    id: '1',
    position: { x: 0, y: 150 },
    data: { label: 'default style 1' },
    ...nodeDefaults,
  },
  {
    id: '2',
    position: { x: 250, y: 0 },
    data: { label: 'default style 2' },
    ...nodeDefaults,
  },
  {
    id: '3',
    position: { x: 250, y: 150 },
    data: { label: 'default style 3' },
    ...nodeDefaults,
  },
  {
    id: '4',
    position: { x: 250, y: 300 },
    data: { label: 'default style 4' },
    ...nodeDefaults,
  },
];
 
const initialEdges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    animated: true,
  },
  {
    id: 'e1-3',
    source: '1',
    target: '3',
  },
  {
    id: 'e1-4',
    source: '1',
    target: '4',
  },
];
 
const Flow = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect = useCallback(
    (params) => setEdges((els) => addEdge(params, els)),
    [],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
    >
      <Background />
      <Controls />
      <MiniMap />
    </ReactFlow>
  );
};
 
export default Flow;

通常，你可以通过在你的 App.jsx 文件或其他入口点中导入它们来加载这些默认样式：

🌐 You’ll typically load these default styles by importing them in you App.jsx file or other entry point:

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

在不涉及 自定义节点 和 边 的情况下，你可以通过三种方式来设置 React Flow 的基本外观：

🌐 Without dipping into custom nodes and edges, there are three ways you can style React Flow’s basic look:

• 通过 style 属性传递内联样式
• 使用自定义 CSS 覆盖内置类
• 覆盖 React Flow 使用的 CSS 变量

内置夜间模式和亮模式

🌐 Built in dark and light mode

你可以通过使用 colorMode 属性（‘dark’、‘light’ 或 ‘system’）选择内置的颜色模式之一，如 夜间模式示例 所示。

🌐 You can choose one of the built-in color modes by using the colorMode prop (‘dark’, ‘light’ or ‘system’) as seen in the dark mode example.

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

当你使用 colorMode 属性时，React Flow 会向根元素 (.react-flow) 添加一个类，你可以根据颜色模式使用它来为流程设置样式：

🌐 When you use the colorMode prop, React Flow adds a class to the root element (.react-flow) that you can use to style your flow based on the color mode:

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

使用 style 属性进行自定义

🌐 Customizing with style props

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

🌐 The easiest way to start customizing the look and feel of your flows is to use the style prop found on many of React Flow’s components to inline your own 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 variables

如果你不想完全替换默认样式，而只是想调整整体外观和感觉，你可以覆盖我们在整个库中使用的一些 CSS 变量。关于如何使用这些 CSS 变量的示例，请查看我们的功能概览示例。

🌐 If you don’t want to replace the default styles entirely but just want to tweak the overall look and feel, you can override some of the CSS variables we use throughout the library. For an example of how to use these CSS variables, check out our Feature Overview example.

这些变量大多不言自明。下面是一个表格，列出了你可能想调整的所有变量及其默认值以供参考：

🌐 These variables are mostly self-explanatory. Below is a table of all the variables you might want to tweak and their default values for reference:

这些变量用于定义 React Flow 各个元素的 默认值。这意味着它们仍然可以被每个元素的内联样式或自定义类覆盖。如果你想覆盖这些变量，你可以通过添加以下内容来实现：

🌐 These variables are used to define the defaults for the various elements of React Flow. This means they can still be overridden by inline styles or custom classes on a per-element basis. If you want to override these variables, you can do so by adding:

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

覆盖内置类

🌐 Overriding built-in classes

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

🌐 Some consider heavy use of inline styles to be an anti-pattern. In that case, you can override the built-in classes that React Flow uses with your own CSS. There are many classes attached to all sorts of elements in React Flow, but the ones you’ll likely want to override are listed below:

第三方解决方案

🌐 Third-party solutions

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

🌐 You can choose to opt-out of React Flow’s default styling altogether and use a third-party styling solution instead. If you want to do this, you must make sure you still import the base styles.

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

import React, { useCallback } from 'react';
import {
  ReactFlow,
  Background,
  Controls,
  MiniMap,
  useNodesState,
  useEdgesState,
  addEdge,
  Position,
} from '@xyflow/react';
 
import '@xyflow/react/dist/base.css';
 
const nodeDefaults = {
  sourcePosition: Position.Right,
  targetPosition: Position.Left,
};
 
const initialNodes = [
  {
    id: '1',
    position: { x: 0, y: 150 },
    data: { label: 'base style 1' },
    ...nodeDefaults,
  },
  {
    id: '2',
    position: { x: 250, y: 0 },
    data: { label: 'base style 2' },
    ...nodeDefaults,
  },
  {
    id: '3',
    position: { x: 250, y: 150 },
    data: { label: 'base style 3' },
    ...nodeDefaults,
  },
  {
    id: '4',
    position: { x: 250, y: 300 },
    data: { label: 'base style 4' },
    ...nodeDefaults,
  },
];
 
const initialEdges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
  },
  {
    id: 'e1-3',
    source: '1',
    target: '3',
  },
  {
    id: 'e1-4',
    source: '1',
    target: '4',
  },
];
 
const Flow = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect = useCallback(
    (params) => setEdges((els) => addEdge(params, els)),
    [],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
    >
      <Background />
      <Controls />
      <MiniMap />
    </ReactFlow>
  );
};
 
export default Flow;

TailwindCSS

自定义节点和边只是 React 组件，你可以使用任何你喜欢的样式方案来为它们设置样式。例如，你可能想使用 Tailwind  来为你的节点设置样式：

🌐 Custom nodes and edges are just React components, and you can use any styling solution you’d like to style them. For example, you might want to use Tailwind  to style your nodes:

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

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

要查看使用 Tailwind 与 React Flow 的完整示例，请查看 示例！

🌐 For a complete example of using Tailwind with React Flow, check out the example!