react中引入樣式的方法:1、模組樣式,引入方式【import './index.css';】;2、行內樣式,程式碼為【
】。
相關學習推薦:react影片教學
本教學操作環境:windows7系統、React17版,此方法適用於所有品牌電腦。
react中引入樣式的方法:
1、模組樣式
在剛開始建立好框架的時候,準備開始寫業務,在第一個頁面的時候就會碰到怎麼引入樣式的問題,踩過一些坑,不是使用style,頭部也不需要另外取名,直接引入css就可以,引入方式是這樣
<div className='topHead back fs14'> <img src='/images/highLevel.png' className='levelSize'/> </div>
使用className的形式
引入方式
import './index.css';
#index.css
@import '~antd/dist/antd.css'; .topHead { width: 100%; height: 100px; display: flex; align-items: center; } .back{ background-image: url('/images/homeBackImg.png'); } .levelSize{ width: 80px; height: 80px; } .levelColor{ color:#ffffff; }
2、行內樣式
#行內樣式跟平常的style='margin:0px'不太一樣,要這樣
<Divider style={{margin:'0px'}}/> 也是用的style,但书写方式不一样了
#相關免費學習推薦:javascript(影片)
以上是react中如何引入樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!