1、內聯樣式的css

import React, { PureComponent } from 'react'export class App extends PureComponent {constructor() {super()this.state = {fs: 20}}render() {const { fs } = this.statereturn (<div><p style={{ color: 'red', fontSize: `${fs}px` }}>哈哈哈哈哈</p><p style={{ color: 'blue' }}>嘿嘿嘿嘿</p></div>)}
}export default App

2、普通的css寫法

Home.jsx

import React, { PureComponent } from 'react'export class Home extends PureComponent {render() {return (<div><p className='title'> 我是 Home.jsx 文件，我的樣式是被影響的，<br />因為，<br />用 import 引入的普通css, 樣式之間會相互影響。</p></div>)}
}export default Home

App.jsx

import React, { PureComponent } from 'react'
import './App.css'  `【用 import 引入的普通css, 不同組件的樣式之間，會相互影響】`
import Home from './Home'export class App extends PureComponent {render() {return (<div><h3 className="title">標題</h3><p className="content">內容哈哈哈哈</p><Home></Home></div>)}
}export default App

App.css

.title {font-size: 32px;color: green;
}.content {font-size: 22px;color: orange;
}

3、CSS_Moudle寫法

• css modules 并不是React特有的解決方案，而是所有使用了類似于webpack配置的環境下都可以使用的，如果在其他項目中使用，就需要自己進行配置了，比如：配置webpack.config.js中的modules: true。

• React的腳手架已經內置了 css modules 的配置，
  我們只需要這樣做即可：
  .css / .less / .scss 等樣式文件，修改成，.module.css / .module.less / .module.scss 等
  之后 import AppStyle from './App.module.css' 這樣引入就行了。

• 但是這種方案也是有缺陷的，如：
  1、引用的類名，不能使用連接符(.home-title)這種形式的，因為在js中不識別
  2、所有的className都必須使用{style.className}的形式編寫
  3、不方便動態修改某些樣式，依然需要內聯樣式進行輔助

App.module.css 文件

.title {font-size: 32px;color: green;
}.content {font-size: 22px;color: orange;
}

App.jsx

import React, { PureComponent } from 'react'
import AppStyle from './App.module.css'
import Home from './Home'export class App extends PureComponent {render() {return (<div><h3 className={AppStyle.title}>標題，我的樣式的類名是title</h3><p className={AppStyle.content}>內容哈哈哈哈，我的樣式的類名是content</p><Home></Home></div>)}
}export default App

Home.jsx

import React, { PureComponent } from 'react'export class Home extends PureComponent {render() {return (<div><p className='title'> 我是 Home.jsx 文件，我的樣式的類名是title<br />因為，<br />本項目使用的 App.module.css 的形式，<br />所以本文件的樣式不受影響</p></div>)}
}export default Home

4、css in js（推薦）

variable.js

export const primaryColor = '#ff8800'
export const secondColor = '#ff7788'export const smallSize = '8px'
export const middleSize = '14px'
export const bigSize = '18px'

style.js

import styled from 'styled-components'*使用外部文件提供的變量
import { smallSize } from './variable'*這里涉及到了es6的 標簽模板字符串
export const AppWrapper = styled.div`.footer {margin-top: 10px;border: 1px solid red;}
`1、可以接受外部傳入的props
2、可以通過 attrs 設置默認值
3、可以使用外部文件提供的變量
export const SectionWrapper = styled.div.attrs(props => {return {tcolor: props.color || 'blue'}
})`border: 1px solid red;.title {/* props.size 的 size 由外部傳入 */font-size: ${props => props.size}px;/* 通過 attrs 提供的默認值 */color: ${props => props.tcolor};// 當 .title 處于 hover狀態時，背景顏色為紫色&:hover {background: purple;}}.content {/* font-size: 20px; */font-size: ${smallSize}; /* 使用外部變量 */color: green;}
`

App.jsx

import React, { PureComponent } from 'react'
import { AppWrapper, SectionWrapper } from './style.js'export class App extends PureComponent {constructor() {super()this.state = {size: 20,   color: 'yellow'}}render() {const { size, color } = this.statereturn (<AppWrapper>{/* <SectionWrapper size={size} color={color}> */}<SectionWrapper size={size}><h2 className="title">我是標題</h2><p className="content">我是內容</p><button onClick={e => this.setState({ color: 'red' })}>更改顏色</button></SectionWrapper><div className="footer"><p>免責聲明</p><p>版權聲明</p></div></AppWrapper>)} // end-render
}export default App

5、第三方庫 classnames

import React, { PureComponent } from 'react'`引入 classnames庫`
import classnames from 'classnames'export class App extends PureComponent {constructor() {super()this.state = {isbbb: false,isccc: true}}render() {const { isbbb, isccc } = this.stateconst classList = ['aaa']if (isbbb) classList.push('bbb')if (isccc) classList.push('ccc')const classname = classList.join(',')return (<div><h2 className={`aaa ${isbbb ? 'bbb' : ''} ${isccc ? 'ccc' : ''}`}>標題哈哈哈哈</h2><h2 className={classname}>呵呵呵</h2>{/* classnames庫 的使用 */}<h2 className={classnames('aaa', {bbb: isbbb}, {ccc: isccc})}>嘿嘿嘿嘿</h2><h2 className={classnames(['aaa', {bbb: isbbb}, {ccc: isccc}])}>嘿嘿嘿嘿</h2></div>)} // end-render
}export default App