反應中的內聯樣式在打印模式下不起作用

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 打印設置中還有一個復選框，上面寫着您可能需要檢查的“背景圖形”。