内联样式在反应中不适用于打印模式 [英] 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屋!