上面可以看到，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，并沒有一個絕對的答案，可以根據各自情況選擇合適的方案

參考文獻

https://zh-hans.reactjs.org/docs/faq-styling.html#gatsby-focus-wrapper

https://mp.weixin.qq.com/s/oywTpNKEikMXn8QTBgITow