react私有样式处理

react私有样式处理

Nav.jsx

Menu.jsx

vue中通过scoped来实现样式私有化。加上scoped，就属于当前组件的私有样式。

给视图中的元素都加了一个属性data-v-xxx，然后给这些样式都加上属性选择器。（deep就是不加属性也不加属性选择器）

5种方案

基础方案一：行内样式（不建议）

这种肯定不能作为主流，优缺点：

基础方案二：人为控制

css module（不是很推荐）

写的所有样式类名都是全局样式；

:global(xxx)，就不会编译了。

继承

react jss

createUseStyles，一样，把样式类名自动编译成唯一的。

动态化处理

*代理函数——使得类组件中能使用

人为保持最外层组件样式的唯一性 -》css modules -》 react-jss（css in js）-》

*HOC高阶组件

函数&类组件都可以玩，redux、路由中都有

利用js中柯理化，利用闭包

1. 导出和渲染的是HOC
2. props是先传给HOC，再传给最终渲染的组件demo。...props 展开props，把每一项展开

好处：在hoc中单独做一些操作，而通过这些操作再把一些东西传给demo。

在HOC可以另外再单独自定义一些逻辑，再作一些处理把加工后的属性传给最终demo。

通过逻辑得到一些结果，最后再通过属性传给最终组件。

styled-component

行内样式不适合大规模；

每个组件最外层类名唯一，人工保证；

css modules；es6 module导入规范；

css in js思想：

react jss

styled-components

两大方式对比：

reactjss：通过执行createUseStyles，把我们样式在对象中进行编写，并且可通过props进行动态样式的编写；返回一个自定义hook，我们在函数组件中是通过这个自定义hook拿到样式类名，把样式赋给className；

把css写在js中，把样式编写在style.div的模板字符串中，然后导出一个自定义组件。

常用到的样式类名

原理：编译出来唯一的样式类名

js中的封装特点 变量，来实现编程化的样式编写。js-in-css 非常流行的思想。

使用props接收传参

具体使用：

一个样式类一个样式类写样式；

把当前组件样式全部封装在一个样式的自定义组件中，把样式包裹在这个组件中，所有样式都可以正常编写。

以上方案可以在项目中综合使用，css-in-jss用一种，然后混合用行内等，两种及以上综合起来用一种。