React編寫組件的局部樣式


  我們都知道,在Vue的單文件組件中,style標簽中編寫的樣式默認為全局樣式,如果我們想編寫局部樣式,

使用一個scoped關鍵字就可以。

  那么在React中怎么實現呢? (注: 這種方法必須使用類選擇器)

   首先,將css文件命名為xxx.module.css。

   然后,我們之前導入css都是用import './xxx.css',現在需要改成import styles(命名隨意) from './xxx.css'

   最后,假設我們的類選擇器是.header, 那么之前我們只需要寫className="header",但是要使用我們的組件局部樣式,我們需要在 要指定樣式的元素上寫

className={styles.header}。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM