Tengo que enviar algunos correos electrónicos y simplemente quiero reutilizar tanto código/conocimiento como sea posible (solo porque sí), para esto quiero convertir un componente React en HTML sin formato con clases en línea.

Logré convertir un componente React en un marcado estático a través de:

 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) }, } }

Esto genera la cadena html sin formato sin los estilos, así que pensé que realmente necesitaba pasar el css compilado para que el inliner hiciera su trabajo.

 <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>

Puede ver en el fragmento que estoy tratando de usar Juice para alinear los estilos, sin embargo, parece que puedo hacer que las clases se representen en el html, ¿alguna idea de cómo lograr esto?