当前位置: 首页 > news >正文

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用一种,然后混合用行内等,两种及以上综合起来用一种。

http://www.lqws.cn/news/154603.html

相关文章:

  • React---day9
  • Educational Codeforces Round 179 (Rated for Div. 2)
  • centos查看开启关闭防火墙状态
  • Java高级 | 【实验五】Spring boot+mybatis操作数据库
  • 获取KIMI API以及API key
  • Jenkins实现自动化部署Springboot项目到Docker容器(Jenkinsfile)
  • IDM 免费安装使用方法,支持6.42版本,实时更新
  • 查看本机显卡信息
  • 华为云Flexus+DeepSeek征文 | 基于DeepSeek-V3构建企业知识库问答机器人实战
  • 不等式中的放缩法
  • Java中List的forEach用法详解
  • 总结vxe-grid的一些用法
  • Jenkins | Linux环境部署Jenkins与部署java项目
  • vscode 离线安装第三方库跳转库
  • 更新Java的环境变量后VScode/cursor里面还是之前的环境变量
  • Github Copilot新特性:Copilot Spaces-成为某个主题的专家
  • 【已解决】MACOS M4 芯片使用 Docker Desktop 工具安装 MICROSOFT SQL SERVER
  • openvino如何在c++中调用pytorch训练的模型
  • 阿里云ACP云计算备考笔记 (3)——云存储RDS
  • HttpServletRequest常用方法
  • 第六个微信小程序:教师工具集
  • 前端js获取当前经纬度(H5/pc/mac/window都可用)
  • JVM——如何打造一个类加载器?
  • Flask-Babel 使用示例
  • Spring 常用注解的使用
  • 全球IP归属地查询接口如何用C#进行调用?
  • IP证书与 域名证书有什么区别?
  • 如何自定义一个 Spring Boot Starter?
  • 老旧热泵设备智能化改造:Ethernet IP转Modbus的低成本升级路径
  • 打通印染车间“神经末梢”:DeviceNet转Ethernet/IP连接机器人的高效方案