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

Question

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

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

我尝试添加 'blue' 而不是 color[index] 并且在网络浏览器中工作但它没有更新打印预览。

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

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

在铬：

在打印预览模式下：

Answer 1

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

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

chrome 打印设置中还有一个复选框，上面写着您可能需要检查的“背景图形”。