一、是什麼

元件式開發選擇合適的css解決方案尤為重要

通常會遵循以下規則：

• 可以編寫區域性css，不會隨意汙染其他元件內的原生；
• 可以編寫動態的css，可以獲取當前元件的一些狀態，根據狀態的變化生成不同的css樣式；
• 支援所有的css特性：偽類、動畫、媒體查詢等；
• 編寫起來簡潔方便、最好符合一貫的css風格特點

在這一方面，vue使用css起來更為簡潔：

• 通過 style 標籤編寫樣式
• scoped 屬性決定編寫的樣式是否區域性有效
• lang 屬性設定前處理器
• 內聯樣式風格的方式來根據最新狀態設定和改變css

而在react中，引入CSS就不如Vue方便簡潔，其引入css的方式有很多種，各有利弊

二、方式

常見的CSS引入方式有以下：

• 在元件內直接使用
• 元件中引入 .css 檔案
• 元件中引入 .module.css 檔案
• CSS in JS

在元件內直接使用

直接在元件中書寫css樣式，通過style屬性直接引入，如下：

import React, { Component } from "react";

const div1 = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",  //駝峰法
  minHeight: "200px",
  boxSizing: "border-box"
};

class Test extends Component {
  constructor(props, context) {
    super(props);
  }
 
  render() {
    
 
return (
     <div>
       <div style={div1}>123</div>
       <div style={{backgroundColor:"red"}}>
     </div>
    );
  }
}

export default Test;

上面可以看到，css屬性需要轉換成駝峰寫法

這種方式優點：

• 內聯樣式, 樣式之間不會有衝突
• 可以動態獲取當前state中的狀態

缺點：

• 寫法上都需要使用駝峰標識

• 某些樣式沒有提示

• 大量的樣式, 程式碼混亂

• 某些樣式無法編寫(比如偽類/偽元素)

元件中引入css檔案

將css單獨寫在一個css檔案中，然後在元件中直接引入

App.css檔案：

.title {
  color: red;
  font-size: 20px;
}

.desc {
  color: green;
  text-decoration: underline;
}

元件中引入：

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.css';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">我是App的標題</h2>
        <p className="desc">我是App中的一段文字描述</p>
        <Home/>
      </div>
    )
  }
}

這種方式存在不好的地方在於樣式是全域性生效，樣式之間會互相影響

元件中引入 .module.css 檔案

將css檔案作為一個模組引入，這個模組中的所有css，只作用於當前元件。不會影響當前元件的後代元件

這種方式是webpack特工的方案，只需要配置webpack配置檔案中modules:true即可

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.module.css';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">我是App的標題</h2>
        <p className="desc">我是App中的一段文字描述</p>
        <Home/>
      </div>
    )
  }
}

這種方式能夠解決區域性作用域問題，但也有一定的缺陷：

• 引用的類名，不能使用連線符(.xxx-xx)，在 JavaScript 中是不識別的
• 所有的 className 都必須使用 {style.className} 的形式來編寫
• 不方便動態來修改某些樣式，依然需要使用內聯樣式的方式；

CSS in JS

CSS-in-JS， 是指一種模式，其中CSS由JavaScript生成而不是在外部檔案中定義

此功能並不是 React 的一部分，而是由第三方庫提供，例如：

• styled-components
• emotion
• glamorous

下面主要看看styled-components的基本使用

本質是通過函式的呼叫，最終創建出一個元件：

• 這個元件會被自動新增上一個不重複的class
• styled-components會給該class新增相關的樣式

基本使用如下：

建立一個style.js檔案用於存放樣式元件：

export const SelfLink = styled.div`
  height: 50px;
  border: 1px solid red;
  color: yellow;
`;

export const SelfButton = styled.div`
  height: 150px;
  width: 150px;
  color: ${props => props.color};
  background-image: url(${props => props.src});
  background-size: 150px 150px;

;

引入樣式元件也很簡單：

import React, { Component } from "react";

import { SelfLink, SelfButton } from "./style";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
       <SelfLink title="People's Republic of China">app.js</SelfLink>
       <SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>
          SelfButton
        </SelfButton>
     </div>
    );
  }
}

export default Test;

三、區別

通過上面四種樣式的引入，可以看到：

• 在元件內直接使用css該方式編寫方便，容易能夠根據狀態修改樣式屬性，但是大量的演示編寫容易導致程式碼混亂

• 元件中引入 .css 檔案符合我們日常的編寫習慣，但是作用域是全域性的，樣式之間會層疊

• 引入.module.css 檔案能夠解決區域性作用域問題，但是不方便動態修改樣式，需要使用內聯的方式進行樣式的編寫

• 通過css in js 這種方法，可以滿足大部分場景的應用，可以類似於前處理器一樣樣式巢狀、定義、修改狀態等

至於使用react用哪種方案引入css，並沒有一個絕對的答案，可以根據各自情況選擇合適的方案