react的样式

前端已经是组件化的天下,而CSS的设计并不是为组件化而生的,所以在目前组件化的框架中都需要一种合适的CSS解决方案; React官方并没有给出React中统一的样式风格, 因此 从普通的css,到css modules ,再到css in js 等 ,有几十种不同的解决方案,上百个不同的库;

在组件化中选择的合适CSS解决方案应该符合以下条件:

1. 可以编写局部CSS,具备局部作用域,不会随意污染其他组件中的元素;
2. 可以编写动态的CSS,可以获取当前组件的一些状态,根据状态的变化生成不同的css样式;
3. 支持所有的CSS特性:伪类,动画,媒体查询等;
4. 编写起来简洁方便,最好符合一贯的css风格;
5. 等等…

一.对比Vue中的CSS

1. vue通过在.vue文件中编写标签来编写自己的样式;
2. 通过是否添加scoped属性来决定编写的样式是全局有效 还是 局部有效;
3. 通过 lang 属性来设置 喜欢的less,sass等预处理器;
4. 通过内联样式的方式,可以根据最新的状态设置和改变css; 等等…
   Vue处理css的方式算是很方便了.

二.React中css

方式一. 内联样式:

1. style 接受一个采用小驼峰命名属性的JS对象,而不是css字符串;
2. 并且可以引用state中的状态来设置相关的样式;

内联样式的优点:
1. 样式之间不会冲突;
2. 可以动态获取当前组件中的state状态;
内联样式的缺点:
1. 写法上都需要使用驼峰命名;
2. 编写样式时没有提示;
3. 大量的样式代码看起来会很乱;
4. 某些样式无法编写(伪类,伪元素等)

方式二.普通的CSS

该方式就是编写一个单独的css文件,再进行引入;
该方式的缺点:

1. 普通的css属于全局的css, 各组件之间样式会相互影响的;
   

方式三. css modules

1. css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。
   但是，如果在其他项目中使用个，那么我们需要自己来进行配置，比如配置webpack.config.js中的modules: true等。
   2. React的脚手架已经内置了css modules的配置：
   .css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等；之后就可以引用并且进行使用了；
   3. css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案
   

该方式的缺点:

1. 引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的；
2. 所有的className都必须使用{style.className} 的形式来编写；
3. 不方便动态来修改某些样式，依然需要配合使用内联样式的方式；

方式四.CSS in JS ---- styled-components

1. 实际上，官方文档也有提到过CSS in JS这种方案：
   “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义； 注意此功能并不是 React 的一部分，而是由第三方库提供。 React 对样式如何定义并没有明确态度;
2. 在传统的前端开发中，我们通常会将结构（HTML）、样式（CSS）、逻辑（JavaScript）进行分离。React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法。 样式呢？样式也是属于UI的一部分； 事实上CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态； 所以React有被人称之为 All in JS；

目前比较流行的CSS-in-JS的库:
styled-components
emotion
glamorous

styled-components:

1. styled-components的本质是通过函数的调
   用，最终创建出一个组件：
   1) 这个组件会被自动添加上一个不重复的
   class；
   2) styled-components会给该class添加相
   关的样式
2. 它支持类似于CSS预处理器一样的样
   式嵌套：
   1) 支持直接子代选择器或后代选择器，并且 直接编写样式；
   2) 可以通过&符号获取当前元素；
   3) 直接伪类选择器、伪元素等；

1.安装: yarn add styled-components
2. 使用: import styled from 'styled-components';

vsCode安装vscode-styled-components插件 写react样式可以智能提示;

3. 特点:
props的穿透可以很好的解决,动态样式问题;
4.styled高级特性
支持样式继承:

styled设置主体:

三.React 中添加 className

1. Vue中添加class:

• 通过传入一个对象：
• 传入一个数组:
  
• 甚至是对象和数组混合使用：

2.React中添加className

方式一:

React在JSX给了我们开发者足够多的灵活性，你可以像编写JavaScript代码一样，通过一些逻辑来决定是否添加某些class：

方式二: 借助于一个第三方的库：classnames

很明显，这是一个用于动态添加classnames的一个库;