React引入css的三種方式小結
更新時間：2022年12月02日 09:29:35 作者：叉叉醬
這篇文章主要介紹了React引入css的三種方式小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
React引入css的方法
<div style="color:red">測試數(shù)據(jù)</div> //報錯
在React中，如果直接按上面的方式寫內聯(lián)樣式會直接報錯，因為JSX語法不支持
React支持以下三種寫css的方法：
1.行內樣式
...
<div style={{
? ? width:'200px',
? ? height:'80px',
? ? backgroundColor:'yellow', ? ?
? ? fontSize:'24px', ? ?
? ? textAlign:'center' ?
}}>測試數(shù)據(jù)</div>
...2.聲明樣式
聲明樣式和行內樣式類似，區(qū)別只是聲明一個變量保存樣式表綁定給style屬性。
...
<div style={{
? ? width:'200px',
? ? height:'80px',
? ? backgroundColor:'yellow', ? ?
? ? fontSize:'24px', ? ?
? ? textAlign:'center' ?
}}>測試數(shù)據(jù)</div>
...3.import引入
一個React組件一般就是一個文件夾，文件夾里包含對應的js和css，只要在js中引入同級的css即可。
import './mystyle.css';
React中css局部引入
配置Webpack模塊化導入CSS
在新項目創(chuàng)建好時，使用命令yarn eject，顯示配置文件
打開config/webpack.config.js
在檢測CSS的地方(426行)添加如下
modules: true, getLocalIdent: getCSSModuleLocalIdent,
使用：
import style from './TestCss.css';
<span className={style.one}>hello</span>
<span id={style.two}>world</span>在React項目中使用Sass
安裝node-sass包 yarn add node-sass
創(chuàng)建sass文件(以.scss為后綴名，在內部寫css代碼)
.TestSass {
span {
? ? color: red;
? ? }
}引入對應的JS文件或者JSX文件
import 'TestSass.scss'
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
React?Native實現(xiàn)Toast輕提示和loading效果
這篇文章主要介紹了React Native實現(xiàn)Toast輕提示和loading效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
使用react-native-doc-viewer實現(xiàn)文檔預覽
這篇文章主要介紹了使用react-native-doc-viewer實現(xiàn)文檔預覽，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了React中的聲明式渲染框架,我們先討論了命令式和聲明式這兩種范式的差異，其中命令式更加關注過程，而聲明式更加關注結果，對React渲染框架知識感興趣的朋友跟隨小編一起看看吧2022-06-06
vite?+?react?+typescript?環(huán)境搭建小白入門教程
這篇文章主要介紹了vite?+?react?+typescript?環(huán)境搭建小白入門教程,本文通過示例圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
React?component.forceUpdate()強制重新渲染方式
這篇文章主要介紹了React?component.forceUpdate()強制重新渲染方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
forwardRef?中React父組件控制子組件的實現(xiàn)代碼
forwardRef 用于拿到父組件傳入的 ref 屬性，這樣在父組件便能通過 ref 控制子組件，這篇文章主要介紹了forwardRef?-?React父組件控制子組件的實現(xiàn)代碼,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了react實現(xiàn)換膚功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了React事件機制源碼解析的相關資料，幫助大家更好的理解和學習使用React框架，感興趣的朋友可以了解下2021-04-04
react-redux的connect與React.forwardRef結合ref失效的解決
這篇文章主要介紹了react-redux的connect與React.forwardRef結合ref失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了淺談在react中如何實現(xiàn)掃碼槍輸入，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07