React中css的幾種使用方式

 

以下方式僅供參考，適合自己項目的纔是最好的！！

一、行內樣式使用

import React from 'react'
class Home extends React.Component {
  render() {
    return (
      <div>
        <h3 style={{fontColor: 'green',marginTop:'5px'}}>標題</h3>
      </div>) }
}
export default Home

注意點：
A、樣式的書寫連接需使用駝峯命名規則；

B、大括號，外面大括號是由於React的JSX風格需由大括號進行包裹，裏面的大括號創建了一個CSS的對象；

優點：

1、書寫快速；

2、局部作用域，推薦組件只用一次的類似活動頁面的開發；

缺點：

1、不利於維護css；

2、增大組件複雜度；

3、可閱讀性差；

4、代碼量多；

二、聲明樣式使用

import React from 'react'
class Home extends React.Component {
  render() {
    const title = {
      fontColor: 'green',
      marginTop: '5px'
    }
    return (
      <div>
        <h3 style={tilte}>標題</h3>
      </div>) }
}
export default Home

原理和行內一毛一樣，只不過將樣式對象抽出來在外部聲明瞭而已。

優點：

1、html框架與樣式分離；

2、同上，這種也比較適用於短週期使用的組件界面；

缺點：

1、影響其他組件同名樣式，容易導致樣式混亂，全局作用域；

2、代碼規範性；

三、外部引入Home.css

import React from 'react';
import './Home.css';
class Home extends React.Component {
  render() {

    return (
      <div>
        <h3 className="title">標題</h3>
      </div>) }
}
export default Home

.title = {
  fontColor: 'green',
  marginTop: '5px'
}

優點：

1、樣式與界面分離，利於維護；

2、適用於系統UI風格基本奠定的應用，無大的變化，可抽取爲公共樣式，如common.css；

3、css代碼量少；

缺點：

1、作用域爲全局；

2、應用UI風格百變或者不確定的不建議使用；

四、CSS Modules 

demo可參考阮一峯的demo：https://github.com/ruanyf/css-modules-demos 介紹很詳細，裏面有css局部作用域、全局作用域、添加hash值等用法；

注意點：

A、需要安裝CSS Modules；

B、webpack配置loaders；

優點：

1、靈活書寫局部、全局作用域樣式；

2、配置開啓modules，渲染唯一hash樣式，避免全局污染；

3、推薦技術棧成熟，約定俗成的團隊應用開發；

缺點：

1、協作開發需制定並遵守開發公約，避免樣式標記global混亂；

五、style Component 

一切皆可成組件，css也不外如是，原理是：在定義組件的時候直接附上組件樣式，需安裝依賴插件，

npm install --save styled-components

import React from 'react';
class Home extends React.Component {
  const Title = styled.h3`
    margin-top: 5px;
    font-color: green;
  `;
  render() {
    return (
      <div>
        <Title>標題</Title>
      </div>) }
}
export default Home

當然style component（Title）也可以放到外部建.js文件做import { Title } from "./style.js";

優點：

1、符合React思想，一切皆爲組件，js、html、css三大巨頭；

2、算是比較新的技術；

缺點：

1、需要一定的開發習慣培養；

2、嵌套組件樣式的開發比較困難；

3、改動不是那麼的靈活，容易重複造輪子；

六、Radium

優雅處理變量、媒體查詢、僞類等，並且可以直接使用js中的數學，連接，正則表達式，條件，函數等，同樣先安裝 npm install radium --save-dev 再引入import radium from 'radium'進行包裹使用;

import React from "react";
import Radium from 'radium';
let styles = {
  title: {
    color: 'green',
    marginTop: '5px'
    ':hover': {
      fontColor: '16px'
    }
  },
  info: {
    color: '#666'
  }
};
class Home extends Component { 
  render() {
    return (
     <div>
      <h3 style={[ styles.title, styles.info ]}>
        標題
      </h3>
     </div>
    );
  }
}
export default Radium(Home); 

優點：

1、處理各種類型樣式，變量、媒體查詢、僞類等，並且可以直接使用js中的數學，連接，正則表達式，條件，函數等；

缺點：

1、全局作用域；

2、export之前Radium需包裹一層；

 

以上純屬個人見解，歡迎交流糾正，謝謝