React引入css的三种方式小结
更新时间：2022年12月02日 09:29:35 作者：叉叉酱
这篇文章主要介绍了React引入css的三种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
React引入css的方法
<div style="color:red">测试数据</div> //报错
在React中，如果直接按上面的方式写内联样式会直接报错，因为JSX语法不支持
React支持以下三种写css的方法：
1.行内样式
...
<div style={{
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}}>测试数据</div>
...2.声明样式
声明样式和行内样式类似，区别只是声明一个变量保存样式表绑定给style属性。
...
<div style={{
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}}>测试数据</div>
...3.import引入
一个React组件一般就是一个文件夹，文件夹里包含对应的js和css，只要在js中引入同级的css即可。
import './mystyle.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
安装node-sass包 yarn add node-sass
创建sass文件(以.scss为后缀名，在内部写css代码)
.TestSass {
span {
color: red;
}
}引入对应的JS文件或者JSX文件
import 'TestSass.scss'
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
React Native实现Toast轻提示和loading效果
这篇文章主要介绍了React Native实现Toast轻提示和loading效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
使用react-native-doc-viewer实现文档预览
这篇文章主要介绍了使用react-native-doc-viewer实现文档预览，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了React中的声明式渲染框架,我们先讨论了命令式和声明式这两种范式的差异，其中命令式更加关注过程，而声明式更加关注结果，对React渲染框架知识感兴趣的朋友跟随小编一起看看吧2022-06-06
vite + react +typescript 环境搭建小白入门教程
这篇文章主要介绍了vite + react +typescript 环境搭建小白入门教程,本文通过示例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
React component.forceUpdate()强制重新渲染方式
这篇文章主要介绍了React component.forceUpdate()强制重新渲染方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
forwardRef 中React父组件控制子组件的实现代码
forwardRef 用于拿到父组件传入的 ref 属性，这样在父组件便能通过 ref 控制子组件，这篇文章主要介绍了forwardRef - React父组件控制子组件的实现代码,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了react实现换肤功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了React事件机制源码解析的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下2021-04-04
react-redux的connect与React.forwardRef结合ref失效的解决
这篇文章主要介绍了react-redux的connect与React.forwardRef结合ref失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了浅谈在react中如何实现扫码枪输入，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论