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 DnD如何处理拖拽示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家介绍了React事件绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
很多朋友在安装插件ES7 React/Redux/GraphQL/React-Native snippets还是不能完全支持jsx语法，纠结是什么原因呢，该如何处理呢，下面小编给大家分享本文帮助大家解决React-vscode使用jsx语法问题，感兴趣的朋友一起看看吧2021-06-06
这篇文章主要介绍了React SSR 之限流,React SSR 毕竟涉及到了服务端，有很多服务端特有的问题需要考虑，而限流就是其中之一，本文会通过一个简单的案例来说明，为什么服务端需要进行限流，需要的朋友可以参考下2022-07-07
React jsx转换与createElement使用超详细讲解
这篇文章主要介绍了React jsx转换与createElement使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-11-11
这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了create-react-app安装出错问题解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
react-native 配置@符号绝对路径配置和绝对路径没有提示的问题
本文主要介绍了react-native 配置@符号绝对路径配置和绝对路径没有提示的问题,文中通过图文示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
这篇文章主要介绍了详解react的两种动态改变css样式的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了Javascript React基础，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的同学可以参考一下2019-06-06
最新评论