转载 ：React普通样式(className)和行内样式(LineStyle)多种设置样式设置详解

转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：http://blog.csdn.net/pcaxb/article/details/53896661

React普通样式(className)和行内样式(LineStyle)多种设置样式设置详解

1.使用className设置样式(CSS的其他选择器也是同理)

(1)定义一个CSS文件style.css,和普通CSS一样定义class选择器

1.  
   .sty1{//和普通CSS一样定义class选择器
2.  
    
3.  
   color: white;
4.  
   font-size: 40px;
5.  
   }

(2)在JSX中导入编写好的CSS文件

import './style.css';

(3)JSX的调用

<div className="sty1">看背景颜色和文字颜色</div>

说明:id选择器也是同理,由于React使用ES6编写代码,而ES6又有class的概念,所以为了不混淆class选择器在React中写成了className
可能你在看别人的代码的时候可能看到以下代码,这个是通过CSS Modules的写法
(1)定义一个CSS文件styleother.css,和普通CSS一样定义class选择器

1.  
   .sty2{//和普通CSS一样定义class选择器
2.  
    
3.  
   color: white;
4.  
   font-size: 40px;
5.  
   }

(2)在JSX中导入编写好的CSS文件

import StyleOther from  './styleother.css';

(3)JSX的调用

<div className={StyleOther.sty2}>看背景颜色和文字颜色</div>

说明:使用这种方式也是可以的,只是你需要修改你的webpack的config文件,将loader: "style!css"修改为loader: "style!css?modules",在css后面加一个modules,不过这两种方式是不能同时存在的,因为加了modules,
详细资料:点击打开链接

2.使用React的行内样式样式设置样式
(1)在JSX文件中定义样式变量,和定义普通的对象变量一样

1.  
   let backAndTextColor = {
2.  
   backgroundColor:'red',
3.  
   color:'white',
4.  
   fontSize:40
5.  
   };

(2)JSX的调用

<div style={backAndTextColor}>看背景颜色和文字颜色</div>

当然你也可以不定义一个变量,直接写到JSX中,如下代码所示:

<div style={{backgroundColor:'red',color:'white',fontSize:40}}>看背景颜色和文字颜色</div>

分析:style={},这里的{}里面放的是对象,不管你是定义一个对象然后使用,还是直接在里面写对象都是可以的,甚至可以写成下面的样子

1.  
   style={this.getInputStyles()}
2.  
   getInputStyles方法根据不同的状态返回不同的样式
3.  
   getInputStyles() {
4.  
   let styleObj;
5.  
   if (this.state.focused == true) {
6.  
   styleObj = {outlineStyle: 'none'};
7.  
   }
8.  
   return styleObj;
9.  
   }

3.React行内样式扩展
在 React 中，行内样式并不是以字符串的形式出现，而是通过一个特定的样式对象来指定。在这个对象中，key 值是用驼峰形式表示的样式名，而其对应的值则是样式值，通常来说这个值是个字符串,如果是数字就不是字符串,不需要引号。

1.  
   var divStyle = {
2.  
   color: 'white',
3.  
   backgroundImage: 'url(' + imgUrl + ')',
4.  
   WebkitTransition: 'all', // 注意这里的首字母'W'是大写
5.  
   msTransition: 'all' // 'ms'是唯一一个首字母需要小写的浏览器前缀
6.  
   };

另外浏览器前缀除了ms以外首字母应该大写,所以这里的WebkitTransition的W是大写的。
当为内联样式指定一个像素值得时候， React 会在你的数字后面自动加上 "px" , 所以下面这样的写法是有效的：

1.  
   let backAndTextColor = {
2.  
   backgroundColor:'red',
3.  
   color:'white',
4.  
   fontSize:40
5.  
   };

有时候你_的确需要_保持你的CSS属性的独立性。下面是不会自动加 "px" 后缀的 css 属性列表：

1.  
   columnCount
2.  
   fillOpacity
3.  
   flex
4.  
   flexGrow
5.  
   flexShrink
6.  
   fontWeight
7.  
   lineClamp
8.  
   lineHeight
9.  
   opacity
10.  
    order
11.  
    orphans
12.  
    strokeOpacity
13.  
    widows
14.  
    zIndex
15.  
    zoom

注释技巧:在React里注释不能用HTML的方式，那是木有用的。也不能直接用js的注释，那也是不行的。而是用大括号括起来，之后用/**/来注释,看起来是这样的{/* 这是一个注释 */}

React普通样式(className)和行内样式(LineStyle)多种设置样式设置详解

博客地址：http://blog.csdn.net/pcaxb/article/details/53896661