网页的布局、颜色、形状等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的使用的更多相关文章

  1. react 中 css模块化类名 和普通全局类名 一起使用

    <div className={[`${styles.tableOpers}`,`clearfix`].join(' ')}></div>

  2. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  3. React中使用CSS

    第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import React, { Component } from "react"; con ...

  4. 转 : CSS Modules详解及React中实践

    https://zhuanlan.zhihu.com/p/20495964 CSS 是前端领域中进化最慢的一块.由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展 ...

  5. 在react中实现CSS模块化

    react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了.下面我将简 ...

  6. React中引用CSS样式的方法

    相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...

  7. react中怎么写css样式?

    JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...

  8. 聊一聊 React 中的 CSS 样式方案

    和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...

  9. react中antd+css Module一起使用

    antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules. 使用 exclude 和 include 配置参考(https:/ ...

随机推荐

  1. eclipse导入mavn工程报Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 的解决办法

    详细报错: Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 from http://10.74. ...

  2. clearfix的运行机制和进化

    话说为什么要把这个记下来,因为昨天去面试,问了clearfix的原理,当时脑子不清晰,回答得真是想要咬舌自尽.遂,决定,要搞清楚来龙去脉~~~(资料来自网上博主们,)http://www.aseoe. ...

  3. handler 方法进不去,服务器上出现应用程序错误。此应用程序的当前自定义错误设置禁止远程查看

    HTTP/1.1 500 Internal Server ErrorCache-Control: privateContent-Type: text/html; charset=utf-8Server ...

  4. 难道这就是gin中间件的原理,一个装饰者模式而已?

    func wrapCtx(handler func(ctx *gin.Context)) gin.HandlerFunc { return func(c *gin.Context) { //获取请求的 ...

  5. js对象引用赋值后

    a={f:1} b={} b.a=a console.log(b.a) a.b=2 console.log(b.a) a={f:1} b={} b.a=a console.log(b.a) a={b: ...

  6. C#调用C库的注意事项

    作者:朱金灿 来源:http://blog.csdn.net/clever101 注意事项一: 从C#的exe进入C库的源码进行调试,需要先"启用非托管代码调试",如下图: 注意事 ...

  7. Java MVC 增删改查 实例

    需求:实现增加新部门的功能,对应数据库表示Oracle的dept表 一.Java MVC 增 实现: 1.视图层(V):注册部门 deptAdd.jsp 在注册新部门页面只需输入“部门名称”和“城市” ...

  8. 刷新本地DNS缓存的方法

    http://www.cnblogs.com/rubylouvre/archive/2012/08/31/2665859.html 常有人问到域名解析了不是即时生效的嘛,怎么还是原来的呢?答案就是在本 ...

  9. Vue相关问题

    1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter, ...

  10. 火狐浏览器返回不加载JS

    火狐浏览器 go(-1),返回后不加载JS,谷歌会加载. 总结: Firefox和Safari在back时不会触发load, ready事件! 解决方法: $(window).unload(funct ...