主题

¥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:

你通常会通过将这些默认样式导入 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';

无需深入了解 自定义节点 和 edges，你可以通过三种方式设计 React Flow 的基本外观：

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

• 通过 style props 传递内联样式

  ¥Passing inline styles through style props

• 使用自定义 CSS 覆盖内置类

  ¥Overriding the built-in classes with custom CSS

• 覆盖 React Flow 使用的 CSS 变量

  ¥Overriding the CSS variables React Flow uses

内置夜间模式和亮模式

¥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 prop 时，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 prop 来内联你自己的 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';

样式组件

¥Styled Components

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

¥Many of the components you render directly, such as the <MiniMap />, accept both className and style props. This means you can use any styling solution you like, such as 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 的完整示例，请查看 示例！

¥For a complete example of using Styled Components with React Flow, check out the example!

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!