如何内联React组件和相关的tailwindCSS类

nfs0ujit  于 2022-10-22  发布在  React
关注(0)|答案(1)|浏览(155)

我必须发送一些电子邮件,我只是想重用尽可能多的代码/知识(只是因为),为此,我想用内联类将React组件呈现为原始HTML。
我已通过以下方式将React组件渲染为静态标记:

const TestMail = () => {
  return (
    <div>
      <h1 className="text-xl font-bold border-b">You have a new Test Email on Productlane</h1>
      <p className="border-b">Something something</p>
      <a href="https://productlane.io/feedback" className="bg-purple-600">
        Open
      </a>
    </div>
  )
}

export function testMailer({ to }: IParams) {
  const emailHtml = ReactDOMServer.renderToStaticMarkup(<TestMail />)
  const processedHtml = juice(emailHtml, {
    webResources: {
      // relativeTo: "app/core/styles/index.css",
    },
  })

  return {
    async send() {
      console.warn("trying to SEND")
      console.warn(processedHtml)
    },
  }
}

这将输出没有样式的原始html字符串,因此我认为我真的需要为内嵌程序传递已编译的css来完成它的工作

<div><h1 class="text-xl font-bold border-b">You have a new Test Email on Productlane</h1><p class="border-b">Something something</p><a href="https://productlane.io/feedback" class="bg-purple-600">Open</a></div>

从代码片段中可以看出,我尝试使用Juice内联样式,但是,我似乎可以在html中呈现类,知道如何实现吗?

4uqofj5v

4uqofj5v1#

对,我一直在做一些挖掘,这是我处理电子邮件的计划。

  • 使用Juice将样式表转换为样式属性,抽象HTML4表作为allow full email client support的React组件。
  • 支持{{ parameters }}将它们保留在输出的HTML中,并在发送电子邮件之前通过Handlebars替换它们。

选项1:

  • 使用NextJS static html export从所述React组件生成HTML文件。
  • 配置build command以在输出文件上运行自定义Juice脚本。
  • 使用手柄引用导出的文件以应用每个用户上下文,例如{ name: “David” }。我在sendEmail()函数中执行此操作。

选项2

  • 使用NextJS服务端点使用每个用户上下文编译车把模板。参考this article

您还可以将自定义Juice脚本替换为this CLI toolthis npm package。您甚至可以选择使用Inky抽象HTML4表。
或者,如果您只希望部分电子邮件客户端支持,NextJS可以将CSS内联到头部,并使用此实验标记讨论here。要获得完全支持,您将需要样式属性中的CSS。
我有一个lambda函数sendEmail(email: string, templateName: string, context: Record<unknown, any>),其中包含hub模板文件包。当发送电子邮件时,它会使用手柄compile()处理上下文。

相关问题