网页的布局、颜色、形状等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. AttributeError: module 'shutil' has no attribute 'copyfileobj'

    import shutil #1.copyfileobj(源文件,目标文件) 将文件内容复制到另一个文件 shutil.copyfileobj(open('config.log','r'),open( ...

  2. Web Scalability for Startup Engineers Tip&Techniques for Scaling You Web Application --读书笔记

    Web Scalability for Startup Engineers Tip&Techniques for Scaling You Web Application 第1章和第2章讲述可伸 ...

  3. C# winwordcontrol控件编程

    C# word控件WinWordControl可创建.编辑.保存word. 1.使用代码直接创建word文件,同时可以添加页眉.内容.图片及表格,示例代码: /// <summary>   ...

  4. PL/SQL 多表关联UPDATE

    假设有两个表A和B,A表字段a,b,c,d,B表字段b,e,f,两表的关联条件是字段b,现在想做个data patch,欲将B表中的字段e的值patch给A表的字段c. 有如下两种方法: 1 upda ...

  5. rpm包的安装方法

    每次都记不住,这次必须整理一下!cd到你存放rpm文件包的目录rpm -ivh linuxqq-v1.0.2-beta1.i386.rpm安装时可能会遇到缺少包的错误.rpm -ivh --repla ...

  6. mac配置android开发环境(一)

    MAC配置ADB环境变量 android环境搭建完成之后需要配置android环境变量,这对以后的运行调试很有帮助. 下面我将一下mac环境下的配置步骤: 1.在本地目录(home directory ...

  7. 浅析linux下软件的安装

    Linux环境: CentOs 6.0 知识点介绍: 一.tarball安装 安装步骤: 将tarball文件在/usr/local/src目录解压缩 ./configure:这个步骤是建立makef ...

  8. 如何用JavaScript判断前端应用运行环境(移动平台还是桌面环境)

    我们部署在某些云平台或者Web服务器上的前端应用,既可以用PC端浏览器访问,也可以用手机上的浏览器访问. 在前端应用里,有时候我们需要根据运行环境的不同做出对应处理.比如下面这段逻辑,如果判断出应用当 ...

  9. (六)使用Docker镜像(下)

    1. 创建镜像 创建镜像的方法有三种: 基于已有镜像的容器创建 基于本地模板导入 基于Dockerfile创建 1.1 基于已有镜像的容器创建 该方法主要是使用docker commit命令,其格式 ...

  10. Java生成固定长度的随机字符串(以大小写字母和数字)

    package org.jimmy.autosearch2019.test; import java.util.ArrayList; import java.util.Random; /** * @a ...