css in js 方案

**什么是css in js**
可以理解为在js 中书写css 不用声明.css .less 之类文件

好处

1.元素随便移动位置，样式同时生效。
2.新增需求，样式表增长缓慢。
3.局部作用域，传统css 是作用于全局的，比如说现在spa 应用 所有样式都会加载到同一环境中，很容易造成命名冲突。而css in js 天然支持scope-css 通过使用hash算法给css 添加作用域，避免全局污染
4.在我们的前端组件中有很多“组件样式随着数据变化”的场景，但传统css应对这种场景很无力、而css in js 却很方便

缺点
1.html 臃肿 样式都在class 类名上，但是可以压缩文件
2.缺少语法提示
3. 运行时的消耗。大部分css in js 样式创建都是在组件被渲染的时候，也就是动态生成css 并添加到style 标签中 这都需要一定的性能消耗

demo
```
import styled from 'styled-components'

export const DivStyled = styled.div`
width:100px;
height:100px;
background-color: red;
color: ${ props=> props.color ? props.color : "blue" }; // 使用变量
p{
font-size: 22px;
}

<!--该组件的 JS 代码被解析执行的时候，styled-components 会动态生成一个 CSS 选择器，并把对应的 CSS 样式通过 style 标签的形式插入到 head 标签中。动态生成的 CSS 选择器会有一小段哈希值作为类名来保证全局的唯一性进而避免样式冲突。-->
```

标签：方案,color,props,js,样式,styled,css
来源： https://www.cnblogs.com/dachengzizi/p/16452666.html