React 组件之样式
无论你的梦想有多么高远，记住，一切皆有可能。
我们从前面的学习知道一个 React 组件不仅仅只包含 DOM 结构的，还应该样式和 Javascript 逻辑的。这里我们学习下如何构建 CSS 样式。
1. 逻辑表示
JSX 中使用大括号语法来包裹 JS 表达式（简单逻辑代码）。例如：
{ 1 + 1 }
{ 表达式/对象/变量/常量 }
2. 样式表示
React 推荐使用行内样式，因为 React 认为每一个组件都是一个独立的整体。具体样式参考文档：
2.1 行内样式
想给虚拟 DOM 添加行内样式，需要使用表达式传入样式对象的方式实现，注意这里两个括号，第一个表示我们要在 JSX 里插入 JS 了，第二个是样式对象的括号：
import React, { Component } from "react"
import "./1-style.css"
class StyleApp extends Component {
render() {
return (
<div>
{ 1+2 }
{/* 行内样式 */}
<div style={{backgroundColor: "red"}}>行内样式第一行数据</div>
{/* 支持外部 CSS 文件 */}
{/* class => className JSX 写法区别 JS 中关键字类 class */}
<div className="active">外部CSS文件样式第二行数据：使用类选择器</div>
{/* 使用 id 选择器 */}
<div id="body">外部CSS文件样式第三行数据：使用id选择器</div>
{/* for => htmlFor JSX 写法，同理 class 关键字 */}
<label htmlFor="username">用户名：</label>
<input type="text" id="username"/>
</div>
)
}
}
export default StyleApp
2.2 外部 CSS 文件
语法格式和示例：
选择器 {
属性名1: 属性值1,
属性名2: 属性值2,
...
}
// CSS 文件
.active {
background: orange;
}
#body {
background: green;
}
CSS 导入原理：
webpack 将 CSS 文件转换成内部样式，加到 style 中，并插到插入到页面的 head 标签里。
import "./1-style.css"
3. 样式描述语言
3.1 CSS
CSS（Cascading Style Sheets，层叠样式表） 文件主要的用途是对网页中字体、颜色、背景、图像及其他各种样式元素的控制，使网页能够完全按照设计者的要求来显示。
3.2 Less
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less 文件最终需要编译成 CSS 文件进行样式的渲染，不过相对比与 CSS，Less 提供了一些额外的功能将有效提高我们开发的效率。
两者之间的区别：
变量：Less 允许单独定义一系列通用的变量，然后在需要的时候去进行调用， 方便更改，提高了代码的复用。示例：
@color: red;
.one{
color:@color;
}
.two{
color:@color;
}
.one{
color:red;
}
.two{
color:red;
}
嵌套：Less 可以使用一个选择器嵌套另外一个选择器，减少代码量。
运算：Less 中提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。示例：
@color: #333333;
.one{
color:@color+#111111;
}
3.3 Sass
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
Less 和 Sass 如何选择：
4. CSS Module 模块化
CSS 是层叠样式表（Cascading Style Sheets）的简称。用于渲染 HTML 式样的。 CSS 的读取是有自己的规则的，从右至左。当项目大点，类名相同时，难免会发生覆盖。从代码中看，明明已经设置了，但是为什么不起作用呢？为了解决这种问题，于是有了 CSS Modules 方案。
CSS 的模块化，这样的方式可以区分各个组件的样式，不会相互覆盖，而且还能定义伪类，React 脚手架当中内置了 CSS Modules 的配置，我们可以直接将 CSS 的文件定义为 xxx.module.css，在 xxx.module.css 文件中，还是按照以前的 CSS 编写方式编写，不同点在于 jsx 页面中定义 className，先引入该 css 文件，然后定义类名以对象的形式定义：
import style from './index.module.css'
return(<div className={style.title}>
hello react
</div>)
这样定义的样式是一个不会重复的字符。这种定义样式的方式能够比较有效的解决样式重叠的问题，麻烦之处就是每次编写样式的时候需要通过对象的语法来定义，并且不支持动态的设置样式。
其次上面提到到 Less（Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。也可以解决上面提到的覆盖问题。
5. styles-components
它是通过 JavaScript 改变 CSS 编写方式的解决方案之一，从根本上解决常规 CSS 编写的一些弊端。通过 JavaScript 来为 CSS 赋能，我们能达到常规 CSS 所不好处理的逻辑复杂、函数复杂、函数方法、复用、避免干扰。样式书写将直接依附在 JSX 上面，HTML、CSS、JS 三者再次内聚。all in js 的思想。模块安装如下：
npm i styled-components
5.1 基础应用
style.label 会在原生组件基础上生成一个带样式的组件，原生组件本身的属性还是存在的，可以透传给组件内部。
import styled from 'styled-components'
export default class StyleComponent extends Component {
render() {
const StylesLebel = styles.label`
background: red
`
return (
<div>
<StylesLebel>StyleComponent</StylesLebel>
</div>
)
}
}
5.2 透传 props
import styled from 'styled-components'
export default class StyleComponent extends Component {
render() {
const StylesLebel = styles.label`
background: ${props=>props.bg}
`
return (
<div>
<StylesLebel bg="red"></StylesLebel>
</div>
)
}
}
5.3 样式化组件
import styled from 'styled-components'
export default class StyleComponent extends Component {
render() {
const StylesChild = styles(Child)`
background: red
`
return (
<div>
<StylesChild></StylesChild>
</div>
)
}
}
function Child(props) {
return <div className={props.className}>Child</div>
}
5.4 样式扩展
const MyButton = styled.button`
background: yellow;`
const BigButton = styled(MButton)`
height: 100px;
width: 100px;`