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

react动态插入样式

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

插入样式

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

  const ref = useRef<HTMLStyleElement>();
  useEffect(() => {
    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);
      }
    };
  }, [css]);

useStyle

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


http://www.kler.cn/a/108400.html

相关文章:

  • 玩转ChatGPT:文献阅读 v2.0
  • A3超级计算机虚拟机,为大型语言模型LLM和AIGC提供强大算力支持
  • WebLogic 介绍
  • Sql server查询数据库表的数量
  • docker更改数据目录
  • Vue.js 项目创建流程
  • 基本微信小程序的外卖点餐订餐平台
  • 数据结构【DS】B树
  • Photoshop使用笔记总目录
  • php使用阿里云文本内容检测openapi-sdk-php
  • MAC安装stable diffusion
  • ES Module 认识
  • 给VSCode插上一双AI的翅膀
  • ThinkPHP6 多应用模式之验证码模块的配置与验证
  • Java中级面试题记录(四)
  • ThinkPad电脑HDMI接口失灵如何解决?
  • 工具箱:【1】简单的自动部署
  • 安全和便捷:如何将运营商二要素API应用于实名制管理中
  • 网络安全—小白自学
  • 数据结构和算法(15):排序
  • 【QT】对象树
  • 14. 机器学习 - KNN 贝叶斯
  • React-快速搭建开发环境
  • openpnp - 汇川伺服和冰沙主板的连接
  • 2023辽宁省赛E
  • MySQL篇---第六篇