React学习（三）--- 组件化开发编写css

1. 内联样式

写法不做赘述。

2. 引入文件式

3. css modules(受欢迎的一种写法👏)

CSSModuleTest.jsx

import { PureComponent } from 'react'
import HomeStyle from '../home.module.css'export class CssModuleTest extends PureComponent {render() {return (<div>CssModuleTest<h1 className={HomeStyle.title}>CSS Module</h1></div>)}
}export default CssModuleTest

home.module.css

.title{font-size: 30px;color: aquamarine;
}

4. css in js （推荐🤺🌟🌟🌟）

npm i styled-component

CSSInJs.jsx

import { PureComponent } from 'react'
import { AppWrapper, PropsWrapper, TitleWrapper } from './cssInJs/style'export class CSSInJS extends PureComponent {render() {return (<div>CSSInJS<AppWrapper><TitleWrapper>TitleWrapper</TitleWrapper><div className='title'>title</div><PropsWrapper size={50}>PropsWrapper</PropsWrapper></AppWrapper></div >)}
}export default CSSInJS

style.js
css in js的三种使用：

1. 基本用法

import styled from 'styled-components'export const AppWrapper = styled.div`.title{font-size: 30px;color: blueviolet;&:hover{color: red;cursor: pointer;}}
`

2. 子元素单独抽离出来

// 2. 子元素单独抽取出来
export const TitleWrapper = styled.div`font-size: 40px;
`

3. 传入props

// 3. 传入props
export const PropsWrapper = styled.div`font-size: ${props => props.size}px;
`

4. attrs

// attrs设置默认值（很少用）
export const PropsWrapperAttrs = styled.div.attrs({ size: 20 })`font-size: ${props => props.size}px;
`// 也可以与props结合使用
export const PropsWrapperAttrs = styled.div.attrs(props=>{return {tColor: props.color || 'blue'}
})`font-size: ${props => props.size}px;
`

6. 使用变量

import * as vars from './style.js'
// 使用变量
export const ColorWrapper = styled.div`color: ${vars.primaryColor};
`// variables.js
export const primaryColor = '#000'
export const secondColor = '#888'

7. ThemeProvider
App.jsx

import { ThemeProvider } from "styled-components"
...
root.render(<React.StrictMode><ThemeProvider theme={{ color: '#eee', fontSize: "20px" }}><App></App></ThemeProvider></React.StrictMode>
)

home/style.js

import styled from 'styled-components'// 使用ThemeProvider传入的主题变量
export const HomeWrapper = styled.div`color: ${props => props.theme.color};font-size: ${props => props.theme.fontSize};
`

5. 动态添加class的库classnames 🌟🌟🌟

npm i classnames

使用classNames()动态添加class

import classNames from 'classnames'
... render() {const { isbbb } = this.statereturn (<div className={classNames("aaa", { "bbb": isbbb })}>classnames</div><div className={classNames(["aaa", { "bbb": isbbb }])}>classnames</div>)}