Javascript 当从按钮触发打印时，React组件将丢失与类名相关的格式，但在内联完成时将其保留

在过去一周半的时间里，React和printing的问题让我停滞不前，我觉得自己一事无成

我发现这很有帮助，但没有一个解决方案完全适合我：

每次的结果基本相同：当您单击“打印”按钮并进入“打印”对话框时，不会反映样式。我几乎用尽了我能想到的任何选项和配置

以下是我关于该问题的回购协议：

在本例中，我只是尝试使用

color:red

将文本变成红色。这种格式会反映在屏幕上，但在单击“打印”按钮并打开打印预览时会消失。它不应该这样做

@media print

不会影响它

“打印”按钮必须正常工作，而不仅仅是在浏览器或

CTRL+p

中打印，因为我们的许多用户并不了解。。。一点也不

回购协议包括一个修改版的

bootstrap.css

，它删除了所有的

@媒体打印

那么这里发生了什么？为什么通过
className
指定的外部文件中的样式不起作用，而内联CSS起作用？感谢您的帮助。（内联不是一个选项，因为它将是一个混乱）

然后，如果您将
renderContent（）
方法更改为以下内容，则样式在打印时确实有效（但同样是不可取的，因为这样会造成混乱）：

但问题是它只打印一个页面和当前屏幕上的内容，而不是加载到模式中的所有数据。
查看您的示例，我没有看到iframe中包含任何CSS。父文档中的样式不适用于
中的元素。如果需要，需要在iframe中手动插入CSS链接

通过制作框架并使用devtools进行检查，您应该能够看到发生了什么。将宽度：0高度：0取下。我有一种感觉，你会看到，即使是屏幕上的版本也缺少css syles。
根据Al Farnsworth的建议，我不得不做以下工作，现在它可以工作了：

    var content = document.getElementById('print');
    var pri = document.getElementById('ifmcontentstoprint').contentWindow;
    pri.document.open();
    pri.document.write(content.innerHTML);

    // generate CSS links
    var bootstrap = document.createElement('link');
    bootstrap.href = '/static/css/bootstrap.css';
    bootstrap.rel = 'stylesheet';
    pri.document.head.appendChild(bootstrap);

    var app = document.createElement('link');
    app.href = '/static/css/bq_print.css';
    app.rel = 'stylesheet';
    pri.document.head.appendChild(app);

正确，CSS不是从父级继承的，也不是采用传递到
中的类/id级样式。所以问题是如何正确地传递CSS？
.printtest {
    color: red !important;
}

renderContent() {
    var i = 0;
    return this.state.data.map((d) => {
        i++
        return (<p style={{ color: 'red' }} key={i}>{i} - {d}</p>)
    });
}

@media print {
    body * {
        visibility: hidden;
    }

    .printtest, .printtest* {
        visibility: visible;
    }

    .printtest {
        position: absolute;
        left: 0;
        top: 0;
        overflow: scroll/visible/auto;
    }
}

    var content = document.getElementById('print');
    var pri = document.getElementById('ifmcontentstoprint').contentWindow;
    pri.document.open();
    pri.document.write(content.innerHTML);

    // generate CSS links
    var bootstrap = document.createElement('link');
    bootstrap.href = '/static/css/bootstrap.css';
    bootstrap.rel = 'stylesheet';
    pri.document.head.appendChild(bootstrap);

    var app = document.createElement('link');
    app.href = '/static/css/bq_print.css';
    app.rel = 'stylesheet';
    pri.document.head.appendChild(app);