【react】react18的学习（五）--样式私有化

上一篇：【react】react18的学习（四）–复合组件通信

vue中scoped，react中没有；

• 方式一：【个别样式可用】行内样式style，不利于复用维护；

• 方式二：【公共样式常用】人为约定，每个组件类名不重复即可，如外层以组件名为前缀：.nav-*{}；

• 方式三：【公共样式可用，原生css写法】CSS Modules：1、以Nav.module.css为样式文件；2、使用import sty from './Nav.module.css'，这个对象是键值对，以css中类名为键，以生成的唯一值为值；3、使用className={sty.box}

// 以Nav.modules.css为样式文件
.box{}
.box2{composes: box;} //组合，相当于使用box2，自动加了box
:global(.demo) {}// 不参与处理，最终还是.demo
// 导入
import sty from './Demo.module.css'
sty={box:'Nav_box_c6EW3'} //生成唯一值，做类名
className={sty.box}

• 方式四：【常用于hooks组件】基于css-in-js思想，安装react-jss；
  • 与css modules相同之处：返回对象键值对；
  • 不同之处：前者是css写法，后者是js写法，支持传参；
  • 默认只能在hooks组件；也可使用代理组件、高阶组件作用于类组件；

import { createUseStyles } from 'react-jss'
// props为调用者传入的参数
const useStyles = createUseStyles({box: props => {return {color: props.color,'& a': {color: props.color,},}},
})
// 使用
const Demo = () => {// box:'box-0-2-1 box-d0-0-2-2'，用于类组件会报错let { box } = useStyles({color: 'black',})return (<div className={box}><div>测试显示</div></div>)
}

• 补充：高阶组件HOC

闭包思想：使用函数执行返回函数组件，函数组件内部嵌套当前组件；可用于动态组件、类组件使用hooks；

// 父组件
<Demo title='hoc组件'></Demo>
// 子组件
import React, { Component } from 'react'class Demo extends Component {render() {let { title } = this.propsreturn ()}
}
const ProxyCom = function (Component) {return function HOC(props) {return <Component {...props}></Component>}
}
export default ProxyCom(Demo)

• 方式五：【公共样式常用】基于css-in-js思想，安装styled-components；
  • 与react-jss相同之处：思想相同，都是js写法，支持传参；
  • 不同之处：返回的是react组件，该组件自带一个hash的类名；与方式二类似，给外层唯一值类名；

// 写样式组件
import styled from 'styled-components'export const Box = styled.div`font-size: 20px;span {color: ${props=>props.color};}
`
// 使用
import { Box } from './Box'return (<Box color='red'><div>{title}</div><span>hello</span></Box>
)

IT男博客