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

我需要生成用于两种场景的HTML- 电子邮件发送时的预览， 可在多个客户端中工作的电子邮件

HTML电子邮件有许多特性和各种客户端可能呈现它的方式，因此我更喜欢使用样式属性而不是类名来输出元素，但是我仍然需要为一些尝试处理客户端特性的事情执行外部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”；
从“/Email.module.css”导入样式；
类EmailHeader扩展了React.Component{
render（）{
返回(
...

我更愿意做这样的事情

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

...

import*as React from“React”；
导入“/vendorsspecificemailstyles.css”；
从“/Email.module.css”导入样式；
类EmailHeader扩展了React.Component{
const headerRule=styles.emailHeader.getRule（）；
render（）{
返回(
...

---

我认为这在当前的CSS模块中是不可能的，但也许有人知道一个已经实现了这一功能的库。

好的，基本上答案是使用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);

let allStyles=“”；
for（设r=0；r

---

我不确定上面的内容在IE11中是否有效，但对于大多数浏览器来说都可以。

一个简单的解决方案是使用内联样式。@ravibagul91是的，但这不是我要做的。我想在某个地方维护css，内联样式是维护css的一个糟糕地方。此外，我显然想使用css模块，包括所有可用于获得正确处理方式的功能。也许应该有一种方式来说明-设想的问题解决问题的方式是不可行的，这个答案建议了一种变通方法，即变通方法具有问题以外的其他标记。