由于最近工作需要，开始研究react，完全新人一个，看到网上好多文章，眼花缭乱，更多的是给我入门的帮助，也尝试写了一些简单的demo。
1. 使用className设置样式(CSS的其他选择器也是同理)
- 定义一个CSS文件style.css,和普通CSS一样定义class选择器
.sty1{//和普通CSS一样定义class选择器
background-color: red;
color: white;
font-size: 40px;
}
- 在JSX中导入编写好的CSS文件
import './style.css';
- JSX的调用
看背景颜色和文字颜色
说明：id选择器也是同理,由于React使用ES6编写代码,而ES6又有class的概念,所以为了不混淆class选择器在React中写成了className
可能你在看别人的代码的时候可能看到以下代码,这个是通过CSS Modules的写法
- 定义一个CSS文件styleother.css,和普通CSS一样定义class选择器
.sty2{//和普通CSS一样定义class选择器
background-color: red;
color: white;
font-size: 40px;
}
- 在JSX中导入编写好的CSS文件
import StyleOther from './styleother.css';
- JSX的调用
看背景颜色和文字颜色
说明：使用这种方式也是可以的,只是你需要修改你的webpack的config文件,将loader: "style!css"修改为loader: "style!css?modules",在css后面加一个modules,不过这两种方式是不能同时存在的,因为加了modules
2. 使用React的行内样式样式设置样式
- 在JSX文件中定义样式变量,和定义普通的对象变量一样
let backAndTextColor = {
backgroundColor:'red',
color:'white',
fontSize:40
};
- JSX的调用
看背景颜色和文字颜色
当然你也可以不定义一个变量,直接写到JSX中,如下代码所示:
看背景颜色和文字颜色
分析：style={},这里的{}里面放的是对象,不管你是定义一个对象然后使用,还是直接在里面写对象都是可以的,甚至可以写成下面的样子
style={this.getInputStyles()}
getInputStyles方法根据不同的状态返回不同的样式
getInputStyles() {
let styleObj;
if (this.state.focused == true) {
styleObj = {outlineStyle: 'none'};
}
return styleObj;
}
3. React行内样式扩展
在 React 中，行内样式并不是以字符串的形式出现，而是通过一个特定的样式对象来指定。在这个对象中，key 值是用驼峰形式表示的样式名，而其对应的值则是样式值，通常来说这个值是个字符串,如果是数字就不是字符串,不需要引号。
var divStyle = {
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // 注意这里的首字母'W'是大写
msTransition: 'all' // 'ms'是唯一一个首字母需要小写的浏览器前缀
};
另外浏览器前缀除了ms以外首字母应该大写,所以这里的WebkitTransition的W是大写的。
当为内联样式指定一个像素值得时候， React 会在你的数字后面自动加上 "px" , 所以下面这样的写法是有效的：
let backAndTextColor = {
backgroundColor:'red',
color:'white',
fontSize:40
};
注释技巧：在React里注释不能用HTML的方式，那是木有用的。也不能直接用js的注释，那也是不行的。而是用大括号括起来，之后用/**/来注释,看起来是这样的
{/* 这是一个注释 */}
总结：通过看这篇文章能让我更多的了解React的CSS写法，此篇转载文章也会作为我个人的一个知识点备份
原文地址：React普通样式(className)和行内样式(LineStyle)多种设置样式设置详解