React中css的使用
网页的布局、颜色、形状等UI展示方式主要是由Css进行设置,在ReactJs中也是一样。ReactJs中的Css结构方式与传统的Web网页类似,但依然存在一些差异。ReactJs中Css文件本身的编写上并没有差异,我们可以定义特定的样式类名,也可以正对Html元素定义样式。差异主要在React对Css的使用上
- 引用的差异:
传统html文件中css文件引用方式:
<link rel="stylesheet" type="text/css" href="mystyle.css">
ReactJs中css文件引用方式:
你可以直接采用require: require('./Category.css');
你也可以采用import: import styles from './Category.css';
- 使用差异:
传统css的使用方式是设置class: <div class=”center”> test </div>
ReactJs中css的使用方式是设置className(因为class已经成为了关键字)。
<div className='entry'>test </div>
另外
如果你采用require的方式,你可以直接在页面元素中使用css文件中的样式名。
如果你采用import styles from './Category.css';的方式,则应采用以下方式。
1.<div className={style.entry}>test </div>
2.<div style={{marginTop:10}}>test </div>
3.import ReactDOM from 'react-dom';
<Button ref="button" />
const button = ReactDOM.findDOMNode(this.refs.button);
button.setAttribute('disabled', 'true');
- 最终解析文件的差异:
传统css文件一般依然保持着源码状态。
在ReactJS中,Css文件最终将会对css样式名进行转换,例如在index.js文件中,引用style.css:
.customButton{
}
将转化为:
.index_customButton_23U0x{
}.
其中23U0x是随机数,这样转化的结果将避免最终的单页面中,css样式名不存在同名冲突。
最新文章
- HTML 与 css 的简单学习
- magento的url中 去掉多余的目录层级
- [转载] Genymotion 解决虚拟镜像下载速度特别慢的问题
- iOS开发零碎笔记
- Mysql字符集设置 2 图
- gcc编译常用选项
- CDZSC_2015寒假新人(1)——基础 d
- Redis系统学习 三、使用数据结构
- Vim 第一天
- Python IDLE快捷键一览
- Linux 进程终止后自动重启
- JS学习笔记Day21
- 洛谷 P2802 回家
- Java实现OPC通信
- IIS 重写 HTTP 重定向到 HTTPS
- VS2015 使用 Visual Studio Emulator For Android 调试无法命中断点的解决办法?
- pycharm的安装和使用
- 软件安装配置笔记(一)——Oracle及PLSQL Developer的安装与配置
- windows2012任务计划不执行
- C# 之 FTPserver中文件上传与下载(一)