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:/ ...
随机推荐
- AttributeError: module 'shutil' has no attribute 'copyfileobj'
import shutil #1.copyfileobj(源文件,目标文件) 将文件内容复制到另一个文件 shutil.copyfileobj(open('config.log','r'),open( ...
- 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章讲述可伸 ...
- C# winwordcontrol控件编程
C# word控件WinWordControl可创建.编辑.保存word. 1.使用代码直接创建word文件,同时可以添加页眉.内容.图片及表格,示例代码: /// <summary> ...
- PL/SQL 多表关联UPDATE
假设有两个表A和B,A表字段a,b,c,d,B表字段b,e,f,两表的关联条件是字段b,现在想做个data patch,欲将B表中的字段e的值patch给A表的字段c. 有如下两种方法: 1 upda ...
- rpm包的安装方法
每次都记不住,这次必须整理一下!cd到你存放rpm文件包的目录rpm -ivh linuxqq-v1.0.2-beta1.i386.rpm安装时可能会遇到缺少包的错误.rpm -ivh --repla ...
- mac配置android开发环境(一)
MAC配置ADB环境变量 android环境搭建完成之后需要配置android环境变量,这对以后的运行调试很有帮助. 下面我将一下mac环境下的配置步骤: 1.在本地目录(home directory ...
- 浅析linux下软件的安装
Linux环境: CentOs 6.0 知识点介绍: 一.tarball安装 安装步骤: 将tarball文件在/usr/local/src目录解压缩 ./configure:这个步骤是建立makef ...
- 如何用JavaScript判断前端应用运行环境(移动平台还是桌面环境)
我们部署在某些云平台或者Web服务器上的前端应用,既可以用PC端浏览器访问,也可以用手机上的浏览器访问. 在前端应用里,有时候我们需要根据运行环境的不同做出对应处理.比如下面这段逻辑,如果判断出应用当 ...
- (六)使用Docker镜像(下)
1. 创建镜像 创建镜像的方法有三种: 基于已有镜像的容器创建 基于本地模板导入 基于Dockerfile创建 1.1 基于已有镜像的容器创建 该方法主要是使用docker commit命令,其格式 ...
- Java生成固定长度的随机字符串(以大小写字母和数字)
package org.jimmy.autosearch2019.test; import java.util.ArrayList; import java.util.Random; /** * @a ...