内联样式在反应中不适用于打印模式 [英] Inline styles in react doesnt work in print mode

问题描述

< div styleName =itemkey = {index} style = {{backgroundColor：color [index]}}>

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

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

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

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

在chrome中：

在打印预览模式下：

解决方案

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

  @media print {
 body {
 -webkit-print-color-adjust：exact; 
 
 
  

在chrome打印设置中还有一个复选框，说你可能需要检查的背景图形。

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

So color[index] is hex color (ex. #ffffff). I can see the proper color in web browsers but for some reason, that doesnt work in Print preview.

I tried to add 'blue' instead of color[index] and that worked in web browser but it didnt update the print preview.

I think inline styles dont work with print. I need to generate the color dynamically so I cant just use one color in css file.

Is there anyone went through same problem?

In chrome :

In print preview mode:

解决方案

You might need to include this @media print property in your main css file:

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

There is also a checkbox in the chrome print settings that says "Background Graphics" that you may need to check.

这篇关于内联样式在反应中不适用于打印模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！