脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React使用scss

React中如何使用scss

 更新时间：2023年03月11日 09:53:40   作者：小火车况且况且  
这篇文章主要介绍了React中如何使用scss问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

React中使用scss

首先导入node-sass npm i node-sass -D

编写样式文件header.scss， header.module.scss 两个样式文件一样，只是文件名不同

.header-box {
    display: flex;
    div {
        font-size: 60px;
    }
}

导入样式文件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>
        )
    }
}

结果

React 中使用scss加上scoped 导入样式文件

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>
        )
    }
}

结果 在普通的样式上面添加了唯一值

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"

后面的类名写具体的类名就行

例子：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • React自定义Hook的实现

    React自定义Hook的实现

    自定义Hook是一种自定义函数,它封装了React Hook的逻辑,并通过命名约定来使其可重用,本文主要介绍了React自定义Hook的实现,感兴趣的可以了解一下
    2023-11-11
  • 详解使用React进行组件库开发

    详解使用React进行组件库开发

    本篇文章主要介绍了详解使用React进行组件库开发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • React脚手架config-overrides.js文件的配置方式

    React脚手架config-overrides.js文件的配置方式

    这篇文章主要介绍了React脚手架config-overrides.js文件的配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • react时间分片实现流程详解

    react时间分片实现流程详解

    实现react时间分片，主要内容包括什么是时间分片、为什么需要时间分片、实现分片开启 - 固定、实现分片中断、重启 - 连续、分片重启、实现延迟执行 - 有间隔、时间分片异步执行方案的演进、时间分片简单实现、总结、基本概念、基础应用、原理机制和需要注意的事项等
    2022-11-11
  • react+redux的升级版todoList的实现

    react+redux的升级版todoList的实现

    本篇文章主要介绍了react+redux的升级版todoList的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • React+EggJs实现断点续传的示例代码

    React+EggJs实现断点续传的示例代码

    这篇文章主要介绍了React+EggJs实现断点续传的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • React之关于Promise的用法

    React之关于Promise的用法

    这篇文章主要介绍了React之关于Promise的用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • 一篇文章带你理解React Props的 原理

    一篇文章带你理解React Props的 原理

    这篇文章主要为大家介绍了ReactProps的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01
  • React实现原生APP切换效果

    React实现原生APP切换效果

    最近需要使用 Hybrid 的方式开发一 个 APP,交互和原生 APP 相似并且需要 IM 通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常详细,感兴趣的小伙伴跟着小编一起来看看吧
    2025-01-01
  • React Fiber结构的创建步骤

    React Fiber结构的创建步骤

    这篇文章主要介绍了React Fiber结构的创建步骤，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04

最新评论