React中打印頁面，樣式不起作用

從網上搜索的結果來看，一種方法就是使用內聯樣式，但是很明顯如果我們的頁面中有很多元素，並且頁面的動效多的時候，內聯樣式就不可取了，既不雅觀將來也不好維護 。

還有一種方式就是使用react-to-print這個插件來做，這裏我並沒有用到。

我最近也遇到了React中調用window.print打印頁面，但是樣式不起作用的問題。我的解決方法是使用了媒體查詢，把打印時需要用到的樣式放到@media print裏面。這樣的話就可以解決這個問題。

@media print {
	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 65px;
		font-weight: 900;
		font-size: 20px;
	}
}

但是我的頁面中需要設置的樣式並不多，所以此方法還可取。如果要是需要把整個頁面全部的樣式都要包括進媒體查詢裏面的話，或許就可以嘗試一下react-to-print這個插件，它更加簡便一點。