React中如何使用scss

更新時間：2023年03月11日 09:53:40 作者：小火車況且況且

這篇文章主要介紹了React中如何使用scss問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

React中使用scss

首先導(dǎo)入node-sass npm i node-sass -D

編寫樣式文件header.scss， header.module.scss 兩個樣式文件一樣，只是文件名不同

.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中寫scss樣式

寫樣式

最外層寫.root類名

里面有:global包裹

再寫具體的類型寫具體的樣式

.root {
  height: 100%;
 
  :global {
    .content {
      position: relative;
      z-index: 1;
      height: 100%;
    }
}

使用樣式

先引入樣式文件import styles from './index.module.scss'

最外層的div里面寫className="styles.root"

后面的類名寫具體的類名就行

例子：

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

React
scss

相關(guān)文章

React自定義Hook的實(shí)現(xiàn)
自定義Hook是一種自定義函數(shù),它封裝了React Hook的邏輯,并通過命名約定來使其可重用,本文主要介紹了React自定義Hook的實(shí)現(xiàn),感興趣的可以了解一下
2023-11-11
詳解使用React進(jìn)行組件庫開發(fā)
本篇文章主要介紹了詳解使用React進(jìn)行組件庫開發(fā)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
React腳手架config-overrides.js文件的配置方式
這篇文章主要介紹了React腳手架config-overrides.js文件的配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
react時間分片實(shí)現(xiàn)流程詳解
實(shí)現(xiàn)react時間分片，主要內(nèi)容包括什么是時間分片、為什么需要時間分片、實(shí)現(xiàn)分片開啟 - 固定、實(shí)現(xiàn)分片中斷、重啟 - 連續(xù)、分片重啟、實(shí)現(xiàn)延遲執(zhí)行 - 有間隔、時間分片異步執(zhí)行方案的演進(jìn)、時間分片簡單實(shí)現(xiàn)、總結(jié)、基本概念、基礎(chǔ)應(yīng)用、原理機(jī)制和需要注意的事項(xiàng)等
2022-11-11
react+redux的升級版todoList的實(shí)現(xiàn)
本篇文章主要介紹了react+redux的升級版todoList的實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼
這篇文章主要介紹了React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
React之關(guān)于Promise的用法
這篇文章主要介紹了React之關(guān)于Promise的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
一篇文章帶你理解React Props的原理
這篇文章主要為大家介紹了ReactProps的原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-01-01
React實(shí)現(xiàn)原生APP切換效果
最近需要使用 Hybrid 的方式開發(fā)一個 APP,交互和原生 APP 相似并且需要 IM 通信,本文給大家介紹了使用React實(shí)現(xiàn)原生APP切換效果,文中通過代碼示例講解的非常詳細(xì),感興趣的小伙伴跟著小編一起來看看吧
2025-01-01
React Fiber結(jié)構(gòu)的創(chuàng)建步驟
這篇文章主要介紹了React Fiber結(jié)構(gòu)的創(chuàng)建步驟，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下
2021-04-04