react 樣式處理
摘要：
jsx內聯樣式 - 用className來繫結類名
語法：
className="類名 類名2" or className={返回字元}
style={key:value,key:value}
1）公共樣式在瀏覽器主入口通過link/style引入
2）元件...
jsx內聯樣式 - 用className來繫結類名
語法：
className="類名 類名2" or className={返回字元}
style={key:value,key:value}
1）公共樣式在瀏覽器主入口通過link/style引入
2）元件import引入，實際上最終還是全域性暴露
問題產生了 - 選擇器衝突
解決方法：
a)名稱空間
b)模組化：import 變數 from './css/xxx.css'
webpack配置 "style-loader!css-loader?modules"
<xxx className={變數.類名}
實際操作
1
image.png
App.css - 元件樣式
base.css - 共同樣式
App.js - 元件
image.png
image.png
image.png
image.png
打包後public裡面的資源會進入到dist資料夾裡面，所以在html頁面中無法使用../src/assets/css/base.css
但是也可以直接在index.js中引入:
image.png
2.模組化引入
image.png
image.png