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这个插件，它更加简便一点。