引入方法有：1、行内样式；2、声明样式，行内样式类似，区别只是声明一个变量保存样式表绑定给style属性；3、import引入，React组件一般是一个文件夹，文件夹里包含对应的js和css，只要在js中引入同级的css即可。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
<div style="color:red">测试数据</div> //报错
在React中，如果直接按上面的方式写内联样式会直接报错，因为JSX语法不支持，React支持以下三种写css的方法：
1.行内样式
...
<div style={{
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}}>测试数据</div>
...2.声明样式
立即学习“前端免费学习笔记（深入）”；
效果描述： 简单好用的立体式左右滚动banner焦点图效果 源代码没有任何图片，且CSS较为冗余，懒人站长已经做过优化，方便懒人们使用 使用方法： 1、将CSS引入到你的页面中，保证命名不冲突 2、将index.html中代码部分拷贝到你需要的地方即可
98
声明样式和行内样式类似，区别只是声明一个变量保存样式表绑定给style属性。
...
<div style={{
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}}>测试数据</div>
...3.import引入
一个React组件一般就是一个文件夹，文件夹里包含对应的js和css，只要在js中引入同级的css即可。
import './mystyle.css';
推荐学习：css视频教程
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
706
收藏
取消收藏
