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中柯理化，利用闭包
- 导出和渲染的是HOC
- 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用一种，然后混合用行内等，两种及以上综合起来用一种。