React中的CSS局部引入過程

更新時間：2023年03月29日 09:22:05 作者：King_960725

這篇文章主要介紹了React中的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

1、安裝node-sass包 yarn add node-sass

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

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

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

import 'TestSass.scss'

React局部樣式和其他小問題

在這里插入圖片描述

//修改對象屬性名字，前面是被修改的屬性名字，后面是修改后的屬性名
JSON.parse(JSON.stringify(item).replace(/_id/g, "key"))

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

ReactNative頁面跳轉實例代碼
這篇文章主要介紹了ReactNative頁面跳轉的代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
淺談react.js 之批量添加與刪除功能
下面小編就為大家?guī)硪黄獪\談react.js 之批量添加與刪除功能。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
React?Hook?Form?優(yōu)雅處理表單使用指南
這篇文章主要為大家介紹了React?Hook?Form?優(yōu)雅處理表單使用指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
React框架快速實現簡易的Markdown編輯器
這篇文章主要為大家介紹了使用React框架實現簡易的Markdown編輯器，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-04-04
react build 后打包發(fā)布總結
這篇文章主要介紹了react build 后打包發(fā)布總結，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
ahooks整體架構及React工具庫源碼解讀
這篇文章主要為大家介紹了ahooks整體架構及React工具庫的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
React?Refs?的使用forwardRef?源碼示例解析
這篇文章主要為大家介紹了React?之?Refs?的使用和?forwardRef?的源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
詳解react hooks組件間的傳值方式(使用ts)
本文主要介紹了react hooks組件間的傳值方式(使用ts)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
React將組件作為參數進行傳遞的3種方法實例
其實react組件之間傳遞參數是比較簡單的,組件傳入參數的一種方式,下面這篇文章主要給大家介紹了關于React將組件作為參數進行傳遞的3種方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
Next.js搭建Monorepo組件庫文檔實現詳解
這篇文章主要為大家介紹了Next.js搭建Monorepo組件庫文檔，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11