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

总结

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

您可能感兴趣的文章:

解决webpack -p压缩打包react报语法错误的方法
这篇文章主要给大家介绍了关于解决webpack -p压缩打包react报语法错误的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
如何在React项目中使用AntDesign
我们在后台管理系统React项目开发中会有Table表格、Form表单、List列表、Button按钮等组件，这个时候我们可以使用AntDesign来减少开发中不必要的样式问题，本文就介绍了eact项目中使用AntDesign，感兴趣的可以了解一下
2022-04-04
React组件渲染后对DOM的操作方式
这篇文章主要介绍了React组件渲染后对DOM的操作方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
在react中使用tailwind的问题
这篇文章主要介绍了在react中使用tailwind的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Suspense对React的意义及作用解析
这篇文章主要为大家介绍了Suspense对React的意义及作用解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
阿里低代码框架lowcode-engine自定义设置器详解
这篇文章主要为大家介绍了阿里低代码框架lowcode-engine自定义设置器示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
vue3中获取ref元素的几种方式总结
这篇文章主要介绍了vue3中获取ref元素的几种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
React降级配置及Ant Design配置详解
这篇文章主要介绍了React降级配置及Ant Design配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
手把手教您实现react异步加载高阶组件
这篇文章主要介绍了手把手教您实现react异步加载高阶组件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
React 中 memo useMemo useCallback 到底该怎么用
在React函数组件中，当组件中的props发生变化时，默认情况下整个组件都会重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括没有更改values/props的函数/组件。在react中，我们可以通过memo，useMemo以及useCallback来防止子组件的rerender
2022-10-10