React引入css的三種方式小結(jié)
更新時間：2022年12月02日 09:29:35 作者：叉叉醬
這篇文章主要介紹了React引入css的三種方式小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
React引入css的方法
<div style="color:red">測試數(shù)據(jù)</div> //報錯
在React中，如果直接按上面的方式寫內(nèi)聯(lián)樣式會直接報錯，因為JSX語法不支持
React支持以下三種寫css的方法：
1.行內(nèi)樣式
...
<div style={{
? ? width:'200px',
? ? height:'80px',
? ? backgroundColor:'yellow', ? ?
? ? fontSize:'24px', ? ?
? ? textAlign:'center' ?
}}>測試數(shù)據(jù)</div>
...2.聲明樣式
聲明樣式和行內(nèi)樣式類似，區(qū)別只是聲明一個變量保存樣式表綁定給style屬性。
...
<div style={{
? ? width:'200px',
? ? height:'80px',
? ? backgroundColor:'yellow', ? ?
? ? fontSize:'24px', ? ?
? ? textAlign:'center' ?
}}>測試數(shù)據(jù)</div>
...3.import引入
一個React組件一般就是一個文件夾，文件夾里包含對應(yīng)的js和css，只要在js中引入同級的css即可。
import './mystyle.css';
React中css局部引入
配置Webpack模塊化導(dǎo)入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為后綴名，在內(nèi)部寫css代碼)
.TestSass {
span {
? ? color: red;
? ? }
}引入對應(yīng)的JS文件或者JSX文件
import 'TestSass.scss'
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了react中路由跳轉(zhuǎn)及傳參的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
react echarts tooltip 區(qū)域新加輸入框編輯保存數(shù)據(jù)功能
這篇文章主要介紹了react echarts tooltip 區(qū)域新加輸入框編輯保存數(shù)據(jù)功能,大概思路是用一個div包裹echarts, 然后在echarts的同級新建一個div用來用來模擬真實tooltip，通過鼠標(biāo)移入移出事件控制真實tooltip的顯示與隱藏，需要的朋友可以參考下2023-05-05
本文主要介紹了React 實現(xiàn)表單組件的示例代碼,支持包括輸入狀態(tài)管理,表單驗證,錯誤信息展示,表單提交,動態(tài)表單元素等功能,具有一定的參考價值,感興趣的可以了解一下2024-07-07
本文主要介紹了React的相關(guān)知識，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
本篇文章主要介紹了react-router4 嵌套路由的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要給大家介紹了在ES6下React組件的寫法，其中包括定義React組件、聲明prop類型與默認(rèn)prop、設(shè)置初始state、自動綁定，文中分別給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
下面小編就為大家?guī)硪黄仙Ｕ刯s-react組件生命周期。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Snake?Game?使用?ReactJS?項目實現(xiàn)功能組件并相應(yīng)地管理狀態(tài),開發(fā)的游戲允許用戶使用箭頭鍵控制蛇或觸摸屏幕上顯示的按鈕來收集食物并增長長度,本文給大家詳細(xì)講解了如何使用?React?制作一個貪吃蛇游戲,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了React實現(xiàn)Step組件（步驟條組件）的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
React組件設(shè)計模式之組合組件應(yīng)用實例分析
這篇文章主要介紹了React組件設(shè)計模式之組合組件,結(jié)合實例形式分析了React組件設(shè)計模式中組合組件相關(guān)概念、原理、應(yīng)用場景與操作注意事項,需要的朋友可以參考下2020-04-04