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

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

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

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

.sty1{//和普通CSS一样定义class选择器
    background-color: red;
    color: white;
    font-size: 40px;
(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选择器 
.sty2{//和普通CSS一样定义class选择器
    background-color: red;
    color: white;
    font-size: 40px;
(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文件中定义样式变量,和定义普通的对象变量一样 
let backAndTextColor = {
    backgroundColor:'red',
    color:'white',
    fontSize:40
(2)JSX的调用 
<div style={backAndTextColor}>看背景颜色和文字颜色</div>
 
当然你也可以不定义一个变量,直接写到JSX中,如下代码所示: 
<div style={{backgroundColor:'red',color:'white',fontSize:40}}>看背景颜色和文字颜色</div>
 
分析: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
有时候你_的确需要_保持你的CSS属性的独立性。下面是不会自动加 "px" 后缀的 css 属性列表： 
columnCount
fillOpacity
flexGrow
flexShrink
fontWeight
lineClamp
lineHeight
opacity
order
orphans
strokeOpacity
widows
zIndex
注释技巧:在React里注释不能用HTML的方式，那是木有用的。也不能直接用js的注释，那也是不行的。而是用大括号括起来，之后用/**/来注释,看起来是这样的{/* 这是一个注释 */}
  
React普通样式(className)和行内样式(LineStyle)多种设置样式设置详解
 
博客地址：http://blog.csdn.net/pcaxb/article/details/53896661
 
 通过以下规则合并React className ， style和事件处理程序（ onClick ， onFocus ， on{LiterallyEveryEvent} ）：
 className道具是串联的
style道具浅层合并，之后的值优先
函数从左到右依次运行。
 npm install merge-props
 const props = mergeProps (
  { onClick : fn1 } ,
  { onClick : fn2 , className : 'blue' } ,
  { onClick : fn3 , className : 'button' , styles : { display : 'block' } } ,
  { styles : { display : 'flex' , color : 'red' } }
                                    直接在React组件中使用style属性来定义样式。这种方式比较适合定义动态的样式，因为它允许你将JavaScript表达式作为样式的值。：通过创建外部的CSS文件，并在React组件中引入这些文件来定义样式。这种方式比较适合定义静态的、可复用的样式。：这是一种将CSS类名局部化的技术，可以有效避免类名冲突的问题。通过创建文件，并在React组件中引入这个文件，你可以使用模块化的CSS类名来定义样式。：这是一个流行的CSS-in-JS库，允许你以组件化的方式编写CSS。
                                    一、关于css-in-js的认识
1、css-in-js是一种使用 js 编写 css 样式的 css 处理方案。它的实现方案有很多，比如styled-components、polished、glamorous(paypal 开源的，不再维护)、radium、emotion等等。
2、其中最成熟的便是styled-components和emotion。它们真正意义上实现了组件化style，可以说是专门为 react 打造的。
二、styled-components 简介
styled-components是 css-in-js 主流的实现方案，同时也是组件化style的主流实现方案。
谁都没有看见过风，更不用说你和我了。但是当纸币在飘的时候，我们知道那是风在数钱。
React 影响着我们工作的方方面面，我们每天都在使用它，只窥其表却难以窥其里。正所谓看不如写，本篇文章的目的就是从原理层面探究 React 是如何工作的。
在写文章之前，为了方便理解，我准备了一个懒人调试仓库 simple_react ，这个仓库将 benchmark 用例（只有两个 ^ ^）和 React 源码共同放在 src 文件夹中，通过 snowpack 进行热更新，可以直接在.
                                    前端踩坑(八)--------------------------react 动态操作className
文章目录前端踩坑(八)--------------------------react 动态操作className问题描述：如何动态修改一个元素的CSS样式呢？一 , react 动态操作className二 , 设置多个className三 这是您如何使用react定义和使用内联样式的方法
1.在中想要动态添加时，通常会使用这个库。2.我们可以通过npm安装：二，使用方法
1.引入: 。2.是一个函数，使用的形式较多，记住常用的使用方法即可：（1）传入一个对象： ，表示相应的class生效，反之false表示不生效。（2）接受多个类名：————————————————
版权声明：本文为CSDN博主「豆瓣酱，」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40340943/article/
                                    写样式的五种方式：使用 style 内联创建使用 class 的方式动态的添加不同的 classstyled-componentsstyled-jsx（不推荐，做了解）1、写样式的第一种方式：使用 style 内联创建例子1--使用 style 内联创建import React from 'react';
import ReactDOM from 'react-dom';
class App e...
在JSX中 行内样式不能为style设置字符串格式的值 而是对象键值对类型的值
若出现连字符 则从第二个单词开始开头要大写 否则必须为字符串格式
在行内样式中 若是纯数值类型的样式 则可以不用引号进行包裹 但若为字符串类型的样式 则必须用引号包裹
export default class Hello extends React.Component