React Email

React Email 是什麼？

React Email 是一組未加樣式的電子郵件元件，用於以 React 和 TypeScript 建構電子郵件。其目標是透過提供可重複使用的建構模組和樣式，讓電子郵件 UI 創作更簡單。

該函式庫包含範例，展示如何組合電子郵件的常見部分（例如文件結構、版面容器、文字、圖片和按鈕），並將其渲染以用於電子郵件工作流程。

用於電子郵件版面的未加樣式 React 元件：使用 Html、Head、Body、Container、Section、Text 和 Img 等元件組合電子郵件結構，讓您控制樣式和版面。
基於 Tailwind 的樣式選項：使用 Tailwind 包裝器將 Tailwind 類別套用至元件（或選擇內聯 CSS 作為替代方式）。
範例與可複製的起始程式碼：從 email-template.tsx 等範例模板開始，然後以您自己的資料取代佔位符。
熱門郵件客戶端的相容性測試：使用內建檢查，查看 HTML/CSS 在 Gmail、Apple Mail、Outlook、Yahoo Mail、HEY 和 Superhuman 的支援情況。
發送前專注投遞性的工具：執行工具包括 連結檢查器（驗證連結）、相容性檢查器（評估客戶端支援）和 垃圾郵件分數 分析器（估計被標記為垃圾郵件的可能性）。
轉換與整合支援：將 React 電子郵件程式碼轉換為 HTML 或純文字，並透過常見電子郵件服務提供者發送，包括 Resend、SendGrid、Amazon Web Services 和 Postmark。

具有可重複使用模板的行銷或入門電子郵件：一次建構歡迎電子郵件（具有如 username 和 company 的可設定屬性），並在各個活動中重複使用相同的元件結構。
團隊跨產品標準化電子郵件 UI：透過在多個專案中使用 React Email 元件，保持常見版面基元（標頭、頁尾、區段、分隔線、格線）一致。
希望獲得更好客戶端相容性回饋的開發團隊：執行相容性檢查器，識別特定 HTML/CSS 方法在常見電子郵件客戶端的表現。
包含電子郵件編輯器的應用程式：整合編輯器工作流程，讓使用者在您的產品中創作電子郵件，而您在底層依賴 React Email 元件。
自動化發送管道：將模板轉換為 HTML 或純文字，並透過如 Resend、SendGrid、AWS 或 Postmark 的電子郵件提供者發送。

React Email 是已樣式化還是未樣式化？

React Email 被描述為一組 未加樣式 元件。您自行套用樣式（例如透過 Tailwind 包裝器使用 Tailwind，或使用內聯 CSS）。
我可以用 Tailwind 或內聯 CSS 樣式化電子郵件嗎？

可以。文件內容指出，您可以使用 Tailwind 或內聯 CSS 讓電子郵件看起來正確。
發送前有哪些驗證工具可用？

頁面列出用於檢查連結的 檢查器、用於熱門客戶端 HTML/CSS 支援的 相容性檢查器，以及 垃圾郵件分數 分析器。
React Email 支援哪些輸出格式？

它能將 React 電子郵件程式碼轉換為 HTML 或純文字。
React Email 可透過哪些電子郵件提供者發送？

頁面提及與 Resend、SendGrid、Amazon Web Services 和 Postmark 的整合。

純 HTML 電子郵件範本：您可以手動撰寫使用表格與內嵌樣式的 HTML。這可能更直接，但會失去 React 元件工作流程以及內建的 linting/相容性工具。
其他基於元件的電子郵件範本函式庫：尋找提供可重用電子郵件 UI 基元（以程式碼形式而非靜態範本）的函式庫。這些方案在相容性檢查與傳遞評分工具的提供程度有所不同。
具拖拉編輯器的電子郵件設計工具：這些工具專注於非開發者的視覺編輯，但可能無法與 React/TypeScript 程式碼基底自然整合，或輸出純文字/HTML 轉換工作流程。
伺服器端電子郵件範本引擎：範本系統可從範本與資料產生 HTML 電子郵件，但通常不提供此處描述的 React 元件結構與電子郵件客戶端專屬檢查。