• 简体中文

      • 样式指南

      外部布局交给 className 和 style，内容内部的颜色与排版交给 theme。

      页面布局

      style 接受 Lynx 的样式对象：

      import { Fluxdown } from '@fluxdown/react-lynx';

<Fluxdown
  className="conversation-message"
  style={{ padding: '16px', maxWidth: '720px' }}
  text={text}
/>;

      浅色与深色

      通过 theme="light" 或 theme="dark" 选择预设。将它连接到应用的主题状态，就能随界面切换：

      <Fluxdown theme={isDark ? 'dark' : 'light'} text={text} />

      覆盖主题

      主题支持预设名称、局部覆盖，以及 [预设名称, 局部覆盖]。尺寸使用带单位的字符串，字体使用宿主已加载的字体：

      <Fluxdown
  theme={[
    'dark',
    {
      tokens: {
        colors: { accent: '#82d8cf' },
        typography: { fontSize: { md: '16px' } },
        paragraph: { marginBottom: '16px' },
      },
    },
  ]}
  text={text}
/>

      Theme、ThemeTokens 与 PartialThemeConfig 从 @fluxdown/react-lynx-plugins/typings 导入。

      分组可调整的内容
      colors文字、背景、边框和强调色。
      typography、heading正文字体、字号、行高，以及各级标题的排版。
      paragraph、code、inlineCode段落间距、代码字号和行内代码样式。
      divider、footnotes分隔线和脚注区域。
      syntax代码高亮颜色。
      radius、spacing共用圆角和间距。

      各组都支持局部覆盖，无需复制完整主题。要替换链接导航、代码工具栏或图片组件，使用 Slot 插件。

      原生文字样式

      文字样式显式传递给原生文字元素，不依赖 CSS 继承；字体与字形度量由宿主提供。inlineCode.whiteSpace 支持 normal 和 nowrap，其他值按 normal 处理。内置原生插槽不使用 typography.fontSmoothing 和 colors.accentHover，自定义宿主插槽可以读取这些 token。