构建和发送电子邮件的React组件的实例教程一组高质量、无风格的组件，用于使用React和TypeScript创建美丽的

React Components For Building And Sending Emails

一组高质量、无风格的组件，用于使用React和TypeScript创建美丽的电子邮件。

它通过支持黑暗模式减少了编码响应式电子邮件的痛苦。它还为你处理了Gmail、Outlook和其他电子邮件客户端之间的不一致。

包括的组件

Html
头部
按钮
链接
图片
分隔符
段落
容器
编码
预览

如何使用它。

1.安装并导入组件

import { Html } from '@react-email/html';
import { Head } from '@react-email/head';
import { Button } from '@react-email/button';
import { A } from '@react-email/a';
import { Img } from '@react-email/img';
import { Hr } from '@react-email/hr';
import { P } from '@react-email/p';
import { Container } from '@react-email/container';
import { Code } from '@react-email/code';
import { Preview } from '@react-email/preview';

2.将组件添加到应用程序中。

// html
const Email = () => {
  return (
    <Html lang="en">
      <Button href="https://example.com" style={{ color: '#61dafb' }}>
        Click me
      </Button>
    </Html>
  );
};

// head
const Email = () => {
  return (
    <Head>
      <title>My email title</title>
    </Head>
  );
};

// button
const Email = () => {
  return (
    <Button href="https://example.com" style={{ color: '#61dafb' }}>
      Click me
    </Button>
  );
};

// Link
const Email = () => {
  return <A href="https://example.com">Example</A>;
};

// image
const Email = () => {
  return <Img src="cat.jpg" alt="Cat" width="300" height="300" />;
};

// divider
const Email = () => {
  return <Hr />;
};

// paragraph
const Email = () => {
  return <Hr />;
};

// container
const Email = () => {
  return (
    <Container>
      <Button href="https://example.com" style={{ color: '#61dafb' }}>
        Click me
      </Button>
    </Container>
  );
};

// code
const Email = () => {
  return (
    <Container>
      <Code style={{ color: '#000' }}>const foo = 'bar';</Code>
    </Container>
  );
};

// preview
const Email = () => {
  return <Preview>Email preview text</Preview>;
};

The postReact Components For Building and Sending Emailsappeared first onReactScript.