如何用 EmailTheming 插件配置 React Email Editor 的邮件输出主题【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email如果你在自己的产品里嵌入了 react-email 的编辑器react-email/editor默认导出出来的邮件只有最基础的样式。EmailTheming插件的作用就是让编辑器按主题渲染和导出主题是一组 CSS-in-JS 样式对象对应到邮件的标题、段落、链接、按钮等组件类型导出时由composeReactEmail把这些样式直接内联成每个节点的style属性——文档指出这是必要的因为邮件客户端对style标签和外部样式表的支持并不可靠。本文覆盖从安装到导出的完整路径选择内置主题basic/minimal、动态切换主题、用extendTheme/createTheme定义自定义主题以及如何验证导出的 HTML 确实带上了主题样式。准备条件编辑器要求React 18以及一个支持 package exports 的打包器Vite、Next.js、Webpack 5 等见 Getting Started。安装编辑器和 peer 依赖以 npm 为例yarn/pnpm/bun 的等价命令见文档原文npm install react-email/editor有两条接入路径本文主路径用独立组件EmailEditor如果你需要完全控制扩展列表、provider 布局或 UI 组合再走EditorProvider低层路径。主路径用 EmailEditor 的 theme 属性配置主题EmailEditor是文档推荐的开箱用法它内部已经装配了StarterKit、Placeholder、EmailTheming、气泡菜单和内置 slash command 菜单见 EmailEditor。因此不用手动把EmailTheming加进扩展数组直接传theme属性即可。theme属性的类型是EditorThemeInput接受两种值内置预设basic默认值包含排版、间距、边框和视觉层级的完整样式或minimal几乎不带样式适合从零开始定制自定义ThemeConfig对象结构为{ extends?: EditorTheme; styles: ThemeComponentStyles }extends省略时以minimal的重置样式为基底。import react-email/editor/themes/default.css; import { EmailEditor, type EmailEditorRef } from react-email/editor; import { useRef, useState } from react; export function MyEditor() { const editorRef useRefEmailEditorRef(null); const [html, setHtml] useState(); const handleExport async () { if (!editorRef.current) return; setHtml(await editorRef.current.getEmailHTML()); }; return ( div EmailEditor ref{editorRef} contenth1Welcome/h1pEdit this email./p themebasic / button onClick{handleExport}Export HTML/button {html textarea readOnly value{html} rows{12} /} /div ); }代码中的content是文档原样示例替换成你自己的邮件内容即可。注意default.css导入的是编辑器界面的主题样式和theme属性控制的邮件输出主题不是一回事。直接在 EmailEditor 上传自定义主题不借助 helper 函数也可以把ThemeConfig对象直接传给theme属性EmailEditor theme{{ extends: basic, styles: { body: { backgroundColor: #f4f4f5 }, button: { backgroundColor: #0670DB }, }, }} /自定义主题的值会出现在 inspector UI 中用户可以继续交互式微调inspector 不区分内置值和自定义值。低层路径在扩展数组中配置 EmailTheming当你使用EditorProvider自建编辑器时需要显式把EmailTheming加进 extensions并导入编辑器界面样式import { StarterKit } from react-email/editor/extensions; import { EmailTheming } from react-email/editor/plugins; import { BubbleMenu } from react-email/editor/ui; import { EditorProvider } from tiptap/react; import react-email/editor/themes/default.css; const extensions [StarterKit, EmailTheming]; export function MyEditor() { return ( EditorProvider extensions{extensions} content{content} BubbleMenu / /EditorProvider ); }不传配置时主题默认为basic。要显式指定const extensions [StarterKit, EmailTheming.configure({ theme: basic })];运行时切换主题用 React state 保存当前主题并在EditorProvider上加key{theme}。文档说明这个 key 会强制 React 在主题变化时重新挂载编辑器确保新主题干净地生效import { StarterKit } from react-email/editor/extensions; import { EmailTheming } from react-email/editor/plugins; import { BubbleMenu } from react-email/editor/ui; import { EditorProvider } from tiptap/react; import { useState } from react; type EditorTheme basic | minimal; export function MyEditor() { const [theme, setTheme] useStateEditorTheme(basic); const extensions [StarterKit, EmailTheming.configure({ theme })]; return ( div div style{{ display: flex, gap: 8px, marginBottom: 16px }} button onClick{() setTheme(basic)}Basic/button button onClick{() setTheme(minimal)}Minimal/button /div EditorProvider key{theme} extensions{extensions} content{content} BubbleMenu / /EditorProvider /div ); }定义自定义主题extendTheme 与 createTheme两个 helper 都从react-email/editor/plugins导入返回值是可直接赋给theme的ThemeConfig对象。基于内置主题覆盖样式——用extendTheme(base, overrides)base只能是basic或minimaloverrides合并到基础主题之上import { StarterKit } from react-email/editor/extensions; import { EmailTheming, extendTheme } from react-email/editor/plugins; import { EditorProvider } from tiptap/react; const brandTheme extendTheme(basic, { body: { backgroundColor: #eff6ff }, h1: { color: #1e40af, fontSize: 28px }, button: { backgroundColor: #2563eb, color: #fff, borderRadius: 6px }, link: { color: #2563eb }, }); const extensions [StarterKit, EmailTheming.configure({ theme: brandTheme })];从零创建主题——用createTheme(styles)不设置extends时以minimal重置样式为基底import { createTheme } from react-email/editor/plugins; const darkTheme createTheme({ body: { backgroundColor: #1a1a2e, color: #e2e8f0 }, container: { backgroundColor: #16213e, color: #e2e8f0 }, h1: { color: #e2e8f0 }, link: { color: #60a5fa }, button: { backgroundColor: #3b82f6, color: #fff, borderRadius: 4px }, });两个细节值得注意可覆盖的组件键由ThemeableComponent限定为body、container、h1、h2、h3、link、image、button、codeBlock、inlineCode。而主题内部可识别的完整键集KnownThemeComponents还有reset、paragraph、list、listItem、listParagraph、nestedList、blockquote、section、footer、hr等——这些由内置主题提供不在自定义覆盖范围内组件说明见 Email Theming 的组件表。每个样式值支持React.CSSProperties外加一个align?: center | left | right字段。文档列出的可定制 CSS 属性包括布局类width、padding*、margin*等、外观类backgroundColor、color、border*等和排版类fontSize、fontWeight、lineHeight、fontFamily等完整清单见 Theming API。验证导出 HTML 确认主题样式已内联主题配置好之后用导出功能验证。两种方式独立组件路径调用 ref 上的getEmailHTML()或getEmail()同时拿html和text底层都走composeReactEmail。低层路径直接调用composeReactEmailimport { composeReactEmail } from react-email/editor/core; // 扩展数组里有 EmailTheming 时主题样式会自动注入无需额外配置 const { html, text } await composeReactEmail({ editor, preview: null });判断标准来自 composeReactEmail 的说明返回值html是可直接发送的完整 HTML 邮件字符串text是纯文本版本两者并行生成导出流程会查找扩展数组里实现了SerializerPlugin接口的插件——EmailTheming就是这个插件它按节点类型和文档树深度解析样式并内联到每个节点的style属性上如果找不到任何SerializerPlugin样式退化为{}并使用内置DefaultBaseTemplate。所以验证时检查导出的 HTML 节点上是否带有主题色值比如上面示例的#eff6ff背景即可确认EmailTheming生效EmailTheming激活时其BaseTemplate会替换默认模板附加 body/container 的主题样式并可在Head中通过style标签注入全局 CSS样式解析优先级高到低节点上直接设置的 inline 样式 当前主题样式 扩展renderToReactEmail()中的硬编码默认值。列表内部的段落会用listParagraph键而不是paragraph键取样式深度只在bulletList/orderedList节点内递增preview参数控制收件箱列表里邮件打开前显示的预览文本不需要时传null。一个边界情况编辑器尚未就绪时调用导出方法会返回空输出getJSON()返回空文档——在onReady之前不要依赖导出结果。参考资料Email Theming——主题机制、内置主题、自定义主题与组件表文末附文档中的可运行示例basic/minimal/custom 切换、createTheme/extendTheme 演示。Theming API——EditorThemeInput、ThemeConfig、ThemeableComponent等类型以及createTheme、extendTheme、getMergedCssJs、getResolvedNodeStyles、getThemeComponentKey、stylesToCss、useEmailTheming等工具函数如果你要写自己的主题面板useEmailTheming(editor)可从编辑器内访问当前主题的styles、theme、css。Email Export 和 composeReactEmail——完整的导出面板示例与序列化管线细节。【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考