React in the printed page, the style does not work

From the point of view of online search results, a method is to use inline styles, but obviously if there are many elements of our page, and the page's dynamic efficiency more time, inline style not desirable, and both unsightly future not good maintenance.

Another way is to use the react-to-print plug-in to do this, and here I did not use.

I recently met React call window.print printed page, but does not work style issues. My solution is to use the media queries, the need to use when printing style into @media print inside. In this case we can solve this problem.

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

But the style I need to set the page is not much, so this method can also be taken. If we need to put the entire page to be included into all media queries style inside, then perhaps you can try to react-to-print plug-in, it is a little easier.

 

Published 30 original articles · won praise 6 · views 40000 +

Guess you like

Origin blog.csdn.net/qq_21901233/article/details/104412988