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样式名不存在同名冲突。
React中css的使用的更多相关文章
- react 中 css模块化类名 和普通全局类名 一起使用
<div className={[`${styles.tableOpers}`,`clearfix`].join(' ')}></div>
- React Native 中 CSS 的使用
首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...
- React中使用CSS
第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import React, { Component } from "react"; con ...
- 转 : CSS Modules详解及React中实践
https://zhuanlan.zhihu.com/p/20495964 CSS 是前端领域中进化最慢的一块.由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展 ...
- 在react中实现CSS模块化
react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了.下面我将简 ...
- React中引用CSS样式的方法
相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...
- react中怎么写css样式?
JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...
- 聊一聊 React 中的 CSS 样式方案
和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...
- react中antd+css Module一起使用
antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules. 使用 exclude 和 include 配置参考(https:/ ...
随机推荐
- JS排序--快速排序
用 JavaScript 实现快速排序代码如下: /* * @author liphong * @data 2019/02/24 */ var arr = []; // 需要被排序数组 /* * 分离 ...
- 进程间通信,把字符串指针作为参数通过SendMessage传递给另一个进程,不起作用
参数发送进程: CString csCmd=AfxGetApp()->m_lpCmdLine; if (!csCmd.IsEmpty()) { pWndPrev->SendMessage( ...
- 【extjs6学习笔记】0.2 准备:类库结构
- SP2-0734: 未知的命令开头 "imp scott/..." - 忽略了剩余的行。
Oracle数据导入报错:SP2-0734: 未知的命令开头 "imp scott/..." - 忽略了剩余的行. 原因:进入sqlplus里是不能执行imp的(sqlplus不认 ...
- x-shell配置远程连接
1. 打开x-shell 2. 配置编译属性 3. 配置用户的身份证信息 5. 配置完成之后选择连接
- 运行spark自带的例子出错及解决
以往都是用java运行spark的没问题,今天用scala在eclipse上运行spark的代码倒是出现了错误 ,记录 首先是当我把相关的包导入好后,Run,报错: Exception in thre ...
- nginx “403 Forbidden” 错误 解决方法
错误的原因是缺少index.html或者index.php文件,就是配置文件中index index.html index.htm这行中的指定的文件 只需要配置时加一句 index index.h ...
- python之路——目录
目录 python基础部分 基础部分 介绍.基本语法.流程控制 列表 元祖 字符串 字典 集合 文件操作 函数 变量 递归 迭代器,生成器,装饰器,Json和pickle 数据序列化 函数 初识函数 ...
- 1653: Champion of the Swordsmanship
1653: Champion of the Swordsmanship Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 11 Solved: 8[Subm ...
- OS X快捷键小技巧
退出command+Q,关分页Command+W,刷新Command+R,新开分页Command+T 全屏 ctrl+command+F 每个Mac使用者都知道点击下窗口左上角黄色圆形的按钮就可以最小 ...