编写CSS的格式

1、内联样式的css

import React, { PureComponent } from 'react'

export class App extends PureComponent {
	constructor() {
		super()

		this.state = {
			fs: 20
		}
	}

	render() {
		const { fs } = this.state
		
		return (
			<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.state
	
		return (
			<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.state
		
		const 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