React中如何使用scss
更新時(shí)間：2023年03月11日 09:53:40 作者：小火車(chē)況且況且
這篇文章主要介紹了React中如何使用scss問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
React中使用scss
首先導(dǎo)入node-sass npm i node-sass -D
編寫(xiě)樣式文件header.scss， header.module.scss 兩個(gè)樣式文件一樣，只是文件名不同
.header-box {
display: flex;
div {
font-size: 60px;
}
}導(dǎo)入樣式文件import './styles/header.scss'
import React from 'react'
import from './styles/header.module.scss'
export default class HeaderDom extends React.Component {
constructor() {
super()
}
render() {
return (
<div className='header-box'>
<div>Hello World</div>
</div>
)
}
}
結(jié)果
React 中使用scss加上scoped 導(dǎo)入樣式文件
import headerStyle from './styles/header.module.scss'
import React from 'react'
import headerStyle from './styles/header.module.scss'
export default class HeaderDom extends React.Component {
constructor() {
super()
console.log(headerStyle)
}
render() {
return (
<div className={ headerStyle['header-box']}>
<div>Hello World</div>
</div>
)
}
}
結(jié)果 在普通的樣式上面添加了唯一值
React中寫(xiě)scss樣式
寫(xiě)樣式
最外層寫(xiě).root類(lèi)名
里面有:global包裹
再寫(xiě)具體的類(lèi)型 寫(xiě)具體的樣式
.root {
height: 100%;
:global {
.content {
position: relative;
z-index: 1;
height: 100%;
}
}使用樣式
先引入樣式文件import styles from './index.module.scss'
最外層的div里面寫(xiě)className="styles.root"
后面的類(lèi)名寫(xiě)具體的類(lèi)名就行
例子：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
自定義Hook是一種自定義函數(shù),它封裝了React Hook的邏輯,并通過(guò)命名約定來(lái)使其可重用,本文主要介紹了React自定義Hook的實(shí)現(xiàn),感興趣的可以了解一下2023-11-11
詳解使用React進(jìn)行組件庫(kù)開(kāi)發(fā)
本篇文章主要介紹了詳解使用React進(jìn)行組件庫(kù)開(kāi)發(fā)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
React腳手架config-overrides.js文件的配置方式
這篇文章主要介紹了React腳手架config-overrides.js文件的配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
react時(shí)間分片實(shí)現(xiàn)流程詳解
實(shí)現(xiàn)react時(shí)間分片，主要內(nèi)容包括什么是時(shí)間分片、為什么需要時(shí)間分片、實(shí)現(xiàn)分片開(kāi)啟 - 固定、實(shí)現(xiàn)分片中斷、重啟 - 連續(xù)、分片重啟、實(shí)現(xiàn)延遲執(zhí)行 - 有間隔、時(shí)間分片異步執(zhí)行方案的演進(jìn)、時(shí)間分片簡(jiǎn)單實(shí)現(xiàn)、總結(jié)、基本概念、基礎(chǔ)應(yīng)用、原理機(jī)制和需要注意的事項(xiàng)等2022-11-11
react+redux的升級(jí)版todoList的實(shí)現(xiàn)
本篇文章主要介紹了react+redux的升級(jí)版todoList的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼
這篇文章主要介紹了React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了React之關(guān)于Promise的用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家介紹了ReactProps的原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
最近需要使用 Hybrid 的方式開(kāi)發(fā)一 個(gè) APP,交互和原生 APP 相似并且需要 IM 通信,本文給大家介紹了使用React實(shí)現(xiàn)原生APP切換效果,文中通過(guò)代碼示例講解的非常詳細(xì),感興趣的小伙伴跟著小編一起來(lái)看看吧2025-01-01
React Fiber結(jié)構(gòu)的創(chuàng)建步驟
這篇文章主要介紹了React Fiber結(jié)構(gòu)的創(chuàng)建步驟，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04