React中如何使用scss
React中使用scss
首先導(dǎo)入node-sass
npm i node-sass -D
編寫樣式文件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中寫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é)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
react版模擬亞馬遜人機(jī)交互菜單的實(shí)現(xiàn)
本文主要介紹了react版模擬亞馬遜人機(jī)交互菜單的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02React?Router?v6路由懶加載的2種方式小結(jié)
React?Router?v6?的路由懶加載有2種實(shí)現(xiàn)方式,1是使用react-router自帶的?route.lazy,2是使用React自帶的?React.lazy,下面我們就來看看它們的具體實(shí)現(xiàn)方法吧2024-04-04字節(jié)封裝React組件手機(jī)號(hào)自動(dòng)校驗(yàn)格式FormItem
這篇文章主要為大家介紹了字節(jié)封裝React組件手機(jī)號(hào)自動(dòng)校驗(yàn)格式FormItem,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08react實(shí)現(xiàn)todolist的增刪改查詳解
這篇文章主要為大家介紹了react實(shí)現(xiàn)todolist的增刪改查,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-12-12React18使用Echarts和MUI實(shí)現(xiàn)一個(gè)交互性的溫度計(jì)
這篇文章我們將結(jié)合使用React 18、Echarts和MUI(Material-UI)庫,展示如何實(shí)現(xiàn)一個(gè)交互性的溫度計(jì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01react component changing uncontrolled in
這篇文章主要為大家介紹了react component changing uncontrolled input報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12npx create-react-app xxx創(chuàng)建項(xiàng)目報(bào)錯(cuò)的解決辦法
這篇文章主要介紹了npx create-react-app xxx創(chuàng)建項(xiàng)目報(bào)錯(cuò)的解決辦法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02React使用TailwindCSS的實(shí)現(xiàn)示例
TailwindCSS是一個(gè)實(shí)用優(yōu)先的CSS框架,本文主要介紹了React使用TailwindCSS的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12