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

Question

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

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

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

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

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

在铬：

在打印预览模式下：

Answer 1

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

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

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