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

學無先后，達者為師

網站首頁 編程語言 正文

React引入css的三種方式小結_React

作者：叉叉醬 ? 更新時間： 2022-12-29 編程語言

React引入css的方法

<div style="color:red">測試數據</div> //報錯

在React中，如果直接按上面的方式寫內聯樣式會直接報錯，因為JSX語法不支持

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

1.行內樣式

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

2.聲明樣式

聲明樣式和行內樣式類似，區別只是聲明一個變量保存樣式表綁定給style屬性。

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

3.import引入

一個React組件一般就是一個文件夾，文件夾里包含對應的js和css，只要在js中引入同級的css即可。

import './mystyle.css';

React中css局部引入

配置Webpack模塊化導入CSS

在新項目創建好時，使用命令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

創建sass文件(以.scss為后綴名，在內部寫css代碼)

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

引入對應的JS文件或者JSX文件

import 'TestSass.scss'

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

欄目分類
最近更新