import React, { PureComponent } from 'react'
export class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      color: 'red'
    }
  }
  render() {
    return (
      <div style={{ colot: this.state.color, backgroundColor: 'skyblue' }}>App</div>
    )
  }
}
export default App

import React, { PureComponent } from 'react'
import './style.css'
export class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      color: 'red'
    }
  }
  render() {
    return (
      <div>App</div>
    )
  }
}
export default App

import React, { PureComponent } from 'react'
// 引入css modules - 實(shí)際會將對應(yīng)的css文件編譯為一個(gè)JS對象
// 當(dāng)我們將一個(gè)樣式文件的后綴名修改為 .module.css的時(shí)候，對應(yīng)樣式文件就變成了css樣式模塊
import AppStyle from './style.module.css'
export class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      color: 'red'
    }
  }
  render() {
    return (
      <div>
				{/*
					css modules 會將css文件編譯為js對象，所以需要向?qū)傩阅菢邮褂?
					同理 如果使用了一個(gè)樣式模塊中不存在的樣式，對應(yīng)值就是undefined
					實(shí)際表現(xiàn)為對應(yīng)元素樣式不生效, 頁面并不會報(bào)錯
				*/}
				<h2 className={AppStyle.title}>title</h2>
				{/*
					對應(yīng)的樣式會被編譯w為 style_content__O3F7P
					也就是 [樣式文件名]_[樣式名]__[hash值]
					從而避免出現(xiàn)樣式?jīng)_突
				*/}
				<p className={AppStyle.content}>content</p>
			</div>
    )
  }
}
export default App

npm install styled-components

import React, { PureComponent } from 'react'
// 使用css in js后，對應(yīng)的樣式直接編寫在js文件中即可
import AppWrapper from './style.js'
export class App extends PureComponent {
  render() {
    return (
      <AppWrapper>
				<h2 className="title">title</h2>
				<p className="content">content</p>
			</AppWrapper>
    )
  }
}
export default App

import styled from 'styled-components'
// styled.div本質(zhì)上是一個(gè)函數(shù)  需要通過標(biāo)簽?zāi)０遄址M(jìn)行調(diào)用 并返回一個(gè)新的有對應(yīng)樣式的組件
// ps: 默認(rèn)情況下對應(yīng)樣式是不會高亮的，需要高亮可以安裝vscode-styled-components插件
export default styled.div`
	/* 對應(yīng)樣式會被編譯為 .jaGVDq */
	/* 即一個(gè)唯一的hash值 */
	/* 所以使用styled-components編寫對應(yīng)的樣式會存在自己的樣式作用域 */
	/* 組件和組件之間的樣式是不會沖突的 */
	/* 
		但因?yàn)榫幾g后的樣式類似于 .jaGVDq .content
		所以在實(shí)際使用過程中，對于后代選擇器仍然可能出現(xiàn)樣式?jīng)_突的情況
  */
	background-color: #f5f5f5;
	/* .jaGVDq .title */
	.title {
		color: red;
		&:hover {
			background-color: gray;
		}
	}
	/* .jaGVDq .content */
	.content {
		color: skyblue
	}
`

import styled from 'styled-components'
export default styled.div`
	background-color: #f5f5f5;
	.content {
		color: skyblue
	}
`
// 如果某一塊的樣式比較多，可以將對應(yīng)的樣式進(jìn)行單獨(dú)抽離
// 形成一個(gè)獨(dú)立的樣式組件
export const TitleWrapper = styled.h2`
	color: red;
	&:hover {
		background-color: gray;
	}
`

import React, { PureComponent } from 'react'
import AppWrapper from './style.js'
export class App extends PureComponent {
	constructor(props) {
		super(props)
		this.state = {
			color: 'skyblue'
		}
	}
  render() {
    return (
			// AppWrapper本質(zhì)上是一個(gè)組件
			// 所以對應(yīng)的樣式直接以props的形式進(jìn)行傳入即可
      <AppWrapper color={ this.state.color }>
				<h2 className="title">title</h2>
				<p className="content">content</p>
			</AppWrapper>
    )
  }
}
export default App

import styled from 'styled-components'
export default styled.div`
	.title {
		/*
			如果直接使用props.color 在js中 會沿著作用域鏈去查找對應(yīng)的props
			所以直接使用props 在css in js中是不合適的
			所以在styled-components中引入外部變量的時(shí)候，需要傳入一個(gè)回調(diào)函數(shù)
			該回調(diào)函數(shù)的參數(shù)為外部傳入的props，返回值是所需要設(shè)置的對應(yīng)樣式值
		*/
		color: ${ props => props.color };
		&:hover {
			background-color: gray;
		}
	}
	.content {
		color: gray
	}
`

import styled from 'styled-components'
// 因?yàn)閟tyled-components 本質(zhì)上就是css in js
// 所以我們也可以通過如下方式來使用styled-components
export default styled.div`
	.title {
		// 解構(gòu)語法
		color: ${ ({ color }) => color };
		&:hover {
		  // 解構(gòu)的時(shí)候 設(shè)置對應(yīng)的默認(rèn)值
			background-color: ${ ({ bgColor = 'yellow' }) => bgColor };
		}
	}
	.content {
	 	// 空值合并操作符
		color: ${ ({ contentColor }) => contentColor ?? 'orange' }
	}
`

import styled from 'styled-components'
// attrs方法會返回對應(yīng)的含有樣式的樣式組件
// 所以在這里可以鏈?zhǔn)秸{(diào)用
// 在attrs中可以傳入一個(gè)回調(diào)函數(shù)，用于設(shè)置對應(yīng)的默認(rèn)值
// 回調(diào)函數(shù)在被調(diào)用的時(shí)候會將對應(yīng)的props傳遞過來
export default styled.div.attrs(props => ({
	contentColor: props.contentColor ?? 'purple'
}))`
	.title {
		color: ${ props => props.color };
		&:hover {
			background-color: gray;
		}
	}
	.content {
		color: ${ props => props.contentColor }
	}
`

export const primaryColor = '#409eff'
export const warnColor = '#e6a23c'
export const successColor = '#67c23a'

import styled from 'styled-components'
import {
	primaryColor,
	successColor
} from '../style/theme'
export default styled.div`
	.title {
		color: ${ successColor };
		&:hover {
			background-color: gray;
		}
	}
	.content {
		color: ${ primaryColor }
	}
`

import ReactDOM from 'react-dom/client'
import App from './App'
import { StrictMode } from 'react'
import { ThemeProvider } from 'styled-components';
ReactDOM.createRoot(document.querySelector('#root')).render(
	<StrictMode>
		{/*
			ThemeProvider 是 styled-components中 導(dǎo)出的 context
			通過theme屬性來設(shè)置對應(yīng)的全局變量值
		*/}
		<ThemeProvider theme={{ color: 'skyblue' }}>
			<App />
		</ThemeProvider>
	</StrictMode>
)

import styled from 'styled-components'
export default styled.div`
	.title {
		/* ThemeContext中提供的全局樣式值會被傳入到 props.theme中 */
		color: ${ props => props.theme.color };
	}
	.content {
		color: red
	}
`

const OriginButton = styled.button`
	border-radius: 5px;
`
export const PrimaryButton = styled(OriginButton)`
	color: #fff;
	background-color: #409eff;
`

import React, { PureComponent } from 'react'
export class App extends PureComponent {
	constructor(props) {
		super(props)
		this.state = {
			isActive: true,
			isCurrent: true
		}
	}
	render() {
		const { isActive, isCurrent } = this.state
		return (
			<div>
				<div className={ `${isActive ? 'active' : '' } ${ isCurrent ? 'current' : '' }` }>active</div>
			</div>
		)
	}
}
export default App

import React, { PureComponent } from 'react'
export class App extends PureComponent {
	constructor(props) {
		super(props)
		this.state = {
			isActive: true,
			isCurrent: true
		}
	}
	render() {
		const { isActive, isCurrent } = this.state
		const activeClass = []
		if (isActive) {
			activeClass.push('active')
		}
		if (isCurrent) {
			activeClass.push('current')
		}
		return (
			<div>
				<div className={ activeClass.join(' ') }>active</div>
			</div>
		)
	}
}
export default App

npm install classnames

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// classnames 支持多種編寫方式 混合使用
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// 只要是falsy值的結(jié)果 全部都會被忽略
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
// classnames 支持 數(shù)組寫法 和 計(jì)算屬性名
className={ classnames([{ [activeClass]: isActive }, { current: isCurrent }])