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

react动态插入样式

在开发组件过程中,偶尔需要动态的插入css,比如在在iframe中渲染组件后,iframe中是没有样式的,所以需要手动插入样式。

插入样式

通常是在useLayoutEffect中动态创建style标签

  useLayoutEffect(() => {if (!ref.current) {const style = document.createElement('style');document.head.append(style);ref.current = style;}ref.current.innerText = css;return () => {if (ref.current) {document.head.removeChild(ref.current);ref.current = undefined;}};}, [css]);

useStyle

useStyle使用一个动态插入style的hook,将上面的代码进行了封装,方便使用。

http://www.lryc.cn/news/212176.html

相关文章:

  • OkHttp网络框架深入理解-SSL握手与加密
  • Mac 安装使用NPM及常用命令
  • 利用 JSqlParser 防止 SQL 注入
  • 10.27~10.29数电第三次实验分析与问题
  • 【软考】14.3 设计模式
  • Mac docker+vscode
  • LLVM学习笔记(58)
  • C语言 每日一题 PTA 10.30 day8
  • nacos在linux中的安装、集群的配置、mysql生产配置
  • OpenAI 组建安全 AGI 新团队!应对AI“潘多拉魔盒”
  • 上网行为管理软件有哪些丨功能图文超详细介绍
  • DVWA-SQL Injection SQL注入
  • 【0基础学Java第四课】-- 逻辑控制
  • C++中的std::cout与std::cerr、std::clog
  • No authorization token was found
  • Kubernetes概述及其组件/核心组件
  • 毫米波雷达实时采集教
  • Java进阶(HashMap)——面试时HashMap常见问题解读 结合源码分析
  • Kotlin 使用@BindingAdapter编译出错
  • Qt之信号和槽,connect参数分析
  • Python学习笔记—元组
  • 【C++项目】高并发内存池第五讲内存回收释放过程介绍
  • [毕设记录]@学术工具体验:Sread.ai
  • uboot - 驱动开发 - 驱动模型
  • windows 操作系统命令积累
  • 数据结构单链表的实现(C语言)
  • Postman的高级使用,傻瓜式学习【下】
  • Qt:关闭对话框,动画实现窗体逐渐缩小到消失
  • 在Windows上 ciphey安装(详细版)
  • 【lesson2】数据库的库操作