【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.props
    return ()
  }
}
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>
)

下一篇：react18的学习（六）–redux补充