反应中的内联样式在打印模式下不起作用

Question

<div styleName="item" key={index} style={{ backgroundColor: color[index] }}>

因此color [index]是十六进制颜色（例如#ffffff）。 我可以在Web浏览器中看到正确的颜色，但出于某种原因，这在打印预览中不起作用。

我尝试添加'蓝色'而不是颜色[索引]，这在网络浏览器中有效，但它没有更新打印预览。

我认为内联样式不适用于print。 我需要动态生成颜色，所以我不能在css文件中使用一种颜色。

有没有人遇到同样的问题？

在chrome：

在打印预览模式下：

Answer 1

您可能需要在主css文件中包含此@media print属性：

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }
}

Chrome打印设置中还有一个复选框，表示＆＃34;背景图形＆＃34;您可能需要检查。