React中的CSS局部引入过程

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

这篇文章主要介绍了React中的CSS局部引入过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

React中CSS局部引入

配置Webpack模块化导入CSS

在新项目创建好时，使用命令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、创建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 之批量添加与删除功能
下面小编就为大家带来一篇浅谈react.js 之批量添加与删除功能。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
React Hook Form 优雅处理表单使用指南
这篇文章主要为大家介绍了React Hook Form 优雅处理表单使用指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
React框架快速实现简易的Markdown编辑器
这篇文章主要为大家介绍了使用React框架实现简易的Markdown编辑器，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
react build 后打包发布总结
这篇文章主要介绍了react build 后打包发布总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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