Ant Design Divider 分割线 `plain` 轻量文本样式：从示例到源码实现解析

本篇技术指南围绕 Ant Design（antd）组件库中 Divider 分割线组件的 plain 示例文档 展开，讲解如何让分割线上的标题文字摆脱"标题化"的加粗样式，呈现出更轻量的正文观感。读完本文，你将掌握 plain 属性的使用方式、与 titlePlacement 的组合技巧，以及它背后在组件源码与样式源码中的具体实现原理，可直接对照当前仓库的 Divider 组件代码验证与复用。

一、示例文档说明：plain 到底是什么

components/divider/demo/plain.md 是 Divider 组件众多 demo 中关于"无标题样式文字分割线"（Text without heading style）的配套说明文档。原文用中英双语给出了同一句核心结论：

• 中文：使用 plain 可以设置为更轻量的分割文字样式；
• 英文：you can use non-heading style of divider text by setting the plain property。

结合 Divider 组件 API 文档 中对该属性的定义，plain 是一个 boolean 类型属性，默认值为 false，自 4.2.0 版本引入。它的作用是：当 Divider 携带 children 文本时，是否将文本按"普通文字（plain text）"而非"标题（heading）"来渲染。

换句话说，Divider 默认会给横线上的文字套用近似小标题的强调样式；一旦开启 plain，文字就降级为更克制的普通正文样式，避免与上下文内容抢视觉焦点。这是该示例在整个分割线组件能力中的定位：一种聚焦文本表现层级的轻量化用法。

二、完整可运行的示例代码

与 plain.md 配套的示例源码位于 components/divider/demo/plain.tsx，完整代码如下：

import React from 'react';
import { Divider } from 'antd';

const App: React.FC = () => (
  <>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider plain>Text</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider titlePlacement="start" plain>
      Left Text
    </Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider titlePlacement="end" plain>
      Right Text
    </Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </>
);

export default App;

该示例实际演示了三种"带文字的水平分割线"形态：

1. 居中文本：<Divider plain>Text</Divider>；
2. 靠左文本：<Divider titlePlacement="start" plain>Left Text</Divider>；
3. 靠右文本：<Divider titlePlacement="end" plain>Right Text</Divider>。

三处段落文字（Lorem ipsum 占位内容）把分割线夹在中间，用于直观地展示：开启 plain 后，分割线上的文字无论处于 start / center / end 哪个位置，都保持与正文相近的轻量观感，不会因标题样式而割裂上下文的阅读节奏。

示例在站点中的实际渲染由快照测试锁定。查看 components/divider/tests/snapshots/demo.test.ts.snap 可以确认其 DOM 结构与 className 组合，例如三个 Divider 分别输出如下类名：

class="ant-divider ... ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
class="ant-divider ... ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start ant-divider-plain"
class="ant-divider ... ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end ant-divider-plain"

可见 plain 生效时会追加 ant-divider-plain 类，并且与 with-text、with-text-center/start/end 等类共存；同一断言也出现在 demo-extend.test.ts.snap 中（模拟了 ConfigProvider 扩展上下文后的渲染）。

三、plain 与默认样式的差异根源

要理解"轻量"二字，需要对比分割线文字在默认与 plain 两种状态下的 CSS 差异，这一差异定义在 components/divider/style/index.ts 中。

先看带文字的水平分割线基础样式（&-horizontal${componentCls}-with-text，即 .ant-divider-horizontal.ant-divider-with-text）：

[`&-horizontal${componentCls}-with-text`]: {
  display: 'flex',
  alignItems: 'center',
  margin: `${unit(token.dividerHorizontalWithTextGutterMargin)} 0`,
  color: token.colorTextHeading,
  fontWeight: 500,
  fontSize: token.fontSizeLG,
  whiteSpace: 'nowrap',
  textAlign: 'center',
  borderBlockStart: `0 ${colorSplit}`,
  // 左右两侧的“轨道”线段各占一半宽度
  [`${railCls}-start, ${railCls}-end`]: {
    width: '50%',
    borderBlockStartColor: 'inherit',
    borderBlockEnd: 0,
    content: "''",
  },
},

可以看到，默认情况下分割线文字采用设计令牌中的 标题文字色 colorTextHeading、500 字重、fontSizeLG 大字号，整体呈现"小标题（heading）"质感，这正是 plain.md 中所说的 heading style。

而当 plain 同时存在时，命中如下规则（components/divider/style/index.ts#L197-L201）：

[`&-plain${componentCls}-with-text`]: {
  color: token.colorText,
  fontWeight: 'normal',
  fontSize: token.fontSize,
},

即 .ant-divider-plain.ant-divider-with-text 会把文字改为：

视觉维度	默认（heading）	plain（non-heading）
颜色	token.colorTextHeading（标题色）	token.colorText（常规正文色）
字重	fontWeight: 500	fontWeight: normal
字号	token.fontSizeLG（较大）	token.fontSize（常规字号）

结论可以概括为一句：plain 的本质是把分割线内文字从"标题级"视觉降级为"正文级"视觉。由于样式通过 @ant-design/cssinjs 在运行时按 token 生成，默认值分别受全局主题中 colorText、colorTextHeading、fontSize、fontSizeLG 影响，因此文章在使用暗色主题或自定义 Design Token 时会自动适配。

四、源码实现：plain 属性如何驱动 className

plain 在组件源码中的实现非常纯粹，仅负责条件式地追加 CSS 类名，全部视觉效果交由样式表完成。参见 components/divider/index.tsx：

首先，plain 被声明在 DividerProps 接口中：

export interface DividerProps {
  // ...其他属性
  plain?: boolean;
  // ...
}

随后在组件的类名拼接逻辑（components/divider/index.tsx#L145-L168）中：

const classString = clsx(
  prefixCls,
  contextClassName,
  hashId,
  cssVarCls,
  `${prefixCls}-${mergedOrientation}`,
  {
    [`${prefixCls}-with-text`]: hasChildren,
    [`${prefixCls}-with-text-${mergedTitlePlacement}`]: hasChildren,
    [`${prefixCls}-dashed`]: !!dashed,
    [`${prefixCls}-${variant}`]: variant !== 'solid',
    [`${prefixCls}-plain`]: !!plain, // ← plain 生效关键
    [`${prefixCls}-rtl`]: direction === 'rtl',
    // ...
  },
  className,
  rootClassName,
  mergedClassNames.root,
);

关键实现事实：

• hasChildren 由 !!children 计算得出（components/divider/index.tsx#L105），只有当 Divider 携带文本子节点时才会打上 -with-text 与 -with-text-* 类；
• 开启 plain 后追加 -plain 类，但其真正视觉生效依赖 &-plain${componentCls}-with-text 的组合选择器——因此 plain 只对"带文字"的分割线有意义，无 children 时 plain 不会产生任何可见效果；
• 根节点带有 role="separator"（components/divider/index.tsx#L219），文本渲染在 ant-divider-inner-text 的 <span> 内（components/divider/index.tsx#L227-L232）。

从源码结构看，plain 与 titlePlacement（支持 center/start/end，向下兼容旧版 left/right）、orientation、dashed、variant 等属性完全正交，可自由组合，示例中"plain + titlePlacement="start""即是组合用法的直接证据。

五、在项目中使用 plain 的实操建议

基于 plain.tsx 与组件 API，在业务代码中使用 plain 时建议遵循以下要点：

1. 必须传入 children 文本。plain 的样式选择器依赖于 with-text 类，没有文字的裸分割线（horizontal 无子节点）不适用 plain；
2. 配合 titlePlacement 使用以控制文本位置。若希望文本靠左或靠右，使用 titlePlacement="start" 或 titlePlacement="end"（源码中 start/end 为 5.24.0 之后推荐的写法，left/right 在 RTL 环境下会被映射为 start/end，见 components/divider/index.tsx#L109-L119）；
3. 注意方向限制。源码在开发环境会给出警告：children 在 vertical 模式下不生效（components/divider/index.tsx#L195），因此 plain 属于水平分割线的文本样式能力；
4. 保持语义优先。plain 解决的是"分隔内容的标题感过重"问题，若文字本来就是强调性的小节标题，则保留默认 heading 样式更合适；plain 适合用在注释、元信息、步骤间轻分隔等场景。

若想让默认（非 plain）标题样式下的文字与边缘留出固定间距，可结合 API 中的 orientationMargin（已被 styles.content.margin 取代的旧属性）或主题 token orientationMargin（默认 0.05，作用于 start/end 时左右轨道宽度比例，见 components/divider/style/index.ts#L127-L143）。文本自身的横向内边距由组件 token textPaddingInline 控制，默认值为 1em（components/divider/style/index.ts#L236-L240），可通过主题定制整体调整。

六、小结

components/divider/demo/plain.md 虽仅一句话点明能力，但其背后是一条完整的实现链路：示例源码（plain.tsx）→ 组件层条件类名（index.tsx 中的 -plain 类）→ 样式层组合选择器降级字色/字重/字号（style/index.ts）→ 快照测试固化 DOM（demo.test.ts.snap）。理解这条链路后，你就可以在真实项目中自如地通过 <Divider plain>...</Divider> 获得轻量、克制的文字分割线，并与 titlePlacement、variant、Design Token 等能力组合出符合页面层级的设计表达。