React中列印頁面,樣式不起作用

2021-10-03 01:27:50 字數 389 閱讀 1984

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

還有一種方式就是使用react-to-print這個外掛程式來做,這裡我並沒有用到。

我最近也遇到了react中呼叫window.print列印頁面,但是樣式不起作用的問題。我的解決方法是使用了**查詢,把列印時需要用到的樣式放到@media print裡面。這樣的話就可以解決這個問題。

@media print 

}

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

React中設定樣式

div 在react中設定class時使用classname,然後引入對用的css檔案 div 方便我們在react中使用classname,可以想vue一樣進行動態的型別設定 styled components 官網 vscode.外掛程式 vscode styled components 簡單的...

react 版權問題 react中樣式衝突怎麼解決

解決react中樣式衝突的方法 首先開啟相應的 檔案 然後將類名前加上模組名,如將整個元件的樣式表css類名前加上元件名lovevideo即可。本教程操作環境 windows7系統 react17.0.1版本,該方法適用於所有品牌電腦。解決react中樣式衝突 react在開發中很多有很多需要注意的...

React 路由引數改變頁面不重新整理問題

最近寫的專案遇到遇到關於react路由的問題,原專案中,查詢的時候獲取文字框上的值並跳轉到查詢結果頁面,在componentdidmount函式中獲取路由上的關鍵字,向其他元件傳遞引數keywords,向後台查詢結果並返回。在重新查詢的過程中,發現雖然路由上的引數已經改變,然而頁面上的查詢結果並沒有...