日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

React引入css的三種方式小結(jié)_React

作者：叉叉醬 ? 更新時(shí)間： 2022-12-29 編程語(yǔ)言

React引入css的方法

<div style="color:red">測(cè)試數(shù)據(jù)</div> //報(bào)錯(cuò)

在React中，如果直接按上面的方式寫內(nèi)聯(lián)樣式會(huì)直接報(bào)錯(cuò)，因?yàn)镴SX語(yǔ)法不支持

React支持以下三種寫css的方法：

1.行內(nèi)樣式

...
<div style={{
? ? width:'200px',
? ? height:'80px',
? ? backgroundColor:'yellow', ? ?　　　　
? ? fontSize:'24px', ? ?　　　　
? ? textAlign:'center' ? 　　　　
}}>測(cè)試數(shù)據(jù)</div>
...

2.聲明樣式

聲明樣式和行內(nèi)樣式類似，區(qū)別只是聲明一個(gè)變量保存樣式表綁定給style屬性。

...
<div style={{
? ? width:'200px',
? ? height:'80px',
? ? backgroundColor:'yellow', ? ?　　　　
? ? fontSize:'24px', ? ?　　　　
? ? textAlign:'center' ? 　　　　
}}>測(cè)試數(shù)據(jù)</div>
...

3.import引入

一個(gè)React組件一般就是一個(gè)文件夾，文件夾里包含對(duì)應(yīng)的js和css，只要在js中引入同級(jí)的css即可。

import './mystyle.css';

React中css局部引入

配置Webpack模塊化導(dǎo)入CSS

在新項(xiàng)目創(chuàng)建好時(shí)，使用命令yarn eject，顯示配置文件

打開config/webpack.config.js

在檢測(cè)CSS的地方(426行)添加如下

modules: true,
getLocalIdent: getCSSModuleLocalIdent,

使用：

import style from './TestCss.css';
<span className={style.one}>hello</span>
<span id={style.two}>world</span>

在React項(xiàng)目中使用Sass

安裝node-sass包 yarn add node-sass

創(chuàng)建sass文件(以.scss為后綴名，在內(nèi)部寫css代碼)

.TestSass {
span {
? ? color: red;
? ? }
}

引入對(duì)應(yīng)的JS文件或者JSX文件

import 'TestSass.scss'

原文鏈接：https://blog.csdn.net/weixin_39782183/article/details/104751590

欄目分類
最近更新