Question

我需要生成将在两种情况下使用的HTML- 预览发送后电子邮件的外观，可以在多个客户端中使用的电子邮件。

HTML电子邮件具有许多客户端可以使用的许多特殊功能和方式，因此，我希望使用样式属性而不是classNames来放置元素，但是对于某些尝试做的事情，我仍然需要做一个外部CSS。处理客户的特点。

所以假设我有类似以下内容

import * as React from "react";
import styles from './Email.module.css';

class EmailHeader extends React.Component{
    render(){
        return (<table className="emailHeader">

...

我希望能够做这样的事情

import * as React from "react";
import './vendorSpecificEmailStyles.css';
import styles from './Email.module.css';

class EmailHeader extends React.Component{
    const headerRule = styles.emailHeader.getRule();
    render(){
        return (<table className="emailHeader" styles={headerRule}>

...

我不认为当前的CSS模块可以做到这一点，但是也许有人知道已经有一个库了。

Answer 1

好吧，基本上，答案是使用果汁。 https://github.com/Automattic/juice

如果页面上内嵌了所有样式表，则只需

Juice(document.documentElement.innerHTML);

如果某些样式表在页面外部，则需要遍历所有css规则并获取cssText，将它们像这样串联在一起

let allStyles = "";
for (let r = 0; r < document.styleSheets.length; r++ ){
    const css = document.styleSheets[r];
    const rules = css.cssRules ? css.cssRules : css.rules;
    for ( let i = 0; i < rules.length; i++ ){
        const rule = rules[i]
        allStyles = allStyles + rule.cssText;
    }
}
Juice.inlineContent(document.documentElement.innerHTML, allStyles);

我不确定以上内容是否可以在IE11中使用，但是对于大多数浏览器，您都会遇到问题。

CSS模块，提取属性以编写内联样式

1 个答案: