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

原创

已于 2023-04-26 22:03:26 修改 · 795 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #javascript

于 2023-04-16 17:32:17 首次发布

文章探讨了在React和Vue中管理组件样式的几种方法，包括行内样式、约定类名、CSSModules、react-jss库以及styled-components。CSSModules提供模块化样式，react-jss允许在JS中定义样式并支持传参，而styled-components则是将CSS写在JS组件内。此外，还提到了高阶组件(HOC)的概念在样式管理和组件动态化中的应用。

上一篇：【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}