無論你的夢想有多麼高遠，記住，一切皆有可能。 我們從前面的學習知道一個 React 組件不僅僅只包含 DOM 結構的，還應該樣式和 Javascript 邏輯的。這裡我們學習下如何構建 CSS 樣式。 1. 邏輯表示 JSX 中使用大括弧語法來包裹 JS 表達式（簡單邏輯代碼）。例如： { 1 + ...
無論你的夢想有多麼高遠，記住，一切皆有可能。
我們從前面的學習知道一個 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;`
