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.mzph.cn/news/125641.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ArcGIS计算土地现状容积率

本文讲解在ArcGIS中,基于建筑数据和地籍边界数据,计算土地容积率。 一、容积率介绍 容积率(Plot Ratio/Floor Area Ratio/Volume Fraction)是指一个小区的地上建筑总面积与净用地面积的比率。又称建筑面积毛密度。 二、数据分析 (1)建筑数据(dwg) (2)地籍边界数据…

C语言 写一个简易音乐播放器

#include <stdio.h> #include <stdlib.h> #include <stdbool.h> #include <math.h>#define SAMPLE_RATE 44100 // 采样率 #define AMPLITUDE 32767 // 振幅 #define NO_SAMPLES 44100 // 样本数// 声明一个结构体用于表示音符 typedef struct {double …

[USACO23OPEN] Field Day S题解

远古的回忆。 把变换一个字符视为边权为 1 1 1 的边&#xff0c;即求最长路。 最长路不好搞&#xff0c;考虑转补集最短路&#xff08;容易感性理解&#xff09;&#xff0c;BFS 即可。 #include<bits/stdc.h> #define int long long using namespace std;const int …

利用AI Chat 将电子书自动截屏并保存成pdf文件

电子书如果要下载下来&#xff0c;无非就两种类型的方法&#xff0c;一种是从内部破解&#xff0c;通常是某些极客将软件破解成免费版&#xff0c;但是风险也大。另一种是从外部破解&#xff0c;就是截屏保存&#xff0c;然后将所有图片拼成pdf文件。 如果要将整本电子书截屏保…

LeetCode刷题---简单组(六)

文章目录 &#x1f352;题目一 69. x 的平方根&#x1f352;解法一&#x1f352;解法二&#x1f352;题目二 70. 爬楼梯&#x1f352;解法一 &#x1f352;题目一 69. x 的平方根 &#x1f352;解法一 class Solution(object):def mySqrt(self, x):""":type x:…

制作一个简单的C语言词法分析程序

1.分析组成 C语言的程序中&#xff0c;有很单词多符号和保留字。一些单词符号还有对应的左线性文法。所以我们需要先做出一个单词字符表&#xff0c;给出对应的识别码&#xff0c;然后跟据对应的表格来写出程序 2.程序设计 程序主要有循环判断构成。不需推理即可产生的符号我…

SSM培训报名管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 培训报名管理系统是一套完善的信息系统&#xff0c;结合SSM框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主 要采用B/S模式开…

Windows2008系统怎么隐藏或打开文件后缀

打开服务器的控制面板-选择小图标-文件夹选项 在文件夹选项那边点击查看-隐藏一直文件类型的扩展名 选择勾选&#xff08;隐藏一直文件类型的扩展名&#xff09;-下图示文件后缀不显示 选择不勾选&#xff08;隐藏一直文件类型的扩展名&#xff09;-下图示文件后缀显示

Go-ansible

文章目录 安装包AdhocPlaybookExecuteDefaultExecute自定义执行器 Optionsansible adhoc and ansible-playbook common options Stdout CallbackResultsTransformersDefaultJSONManage JSON output 示例 Go ansible是一个用于从Golang应用程序运行ansible剧本或ansible命令的包…

VsCode 只有一个标签页 编辑区只能打开一个文件

产生如图所示的问题&#xff1a; 可能是不小心取消了勾选 勾选&#xff0c;Show Tabs

前端 : 用HTML ,CSS ,JS 做一个点名器

1.HTML&#xff1a; <body><div id "content"><div id"top"><div id "name">XAiot2302班点名器</div></div><div id "center"><div id "word">你准备好了吗?</di…

【Docker 内核详解】cgroups 资源限制(二):组织结构与基本规则、子系统简介

cgroups 资源限制&#xff08;二&#xff09;&#xff1a;组织结构与基本规则、子系统简介 1.组织结构与基本规则2.子系统简介 1.组织结构与基本规则 在之前的博客已经介绍过&#xff0c;传统的 Unix 任务管理&#xff0c;实际上是先启动 init 任务作为根节点&#xff0c;再由…

Specializing Smaller Language Models towards Multi-Step Reasoning论文精读

0 Abstract 普遍认为&#xff0c;LLM涌现出来的few-shot learning能力是超大参数模型独有的&#xff08;>100B&#xff09;【emergent abilities】&#xff1b;作者认为&#xff0c;小模型&#xff08;<10B&#xff09;可以将这些能力从大模型&#xff08;>100B&…

uniapp中APP端使用echarts用formatter设置y轴保留2位小数点不生效

uniapp使用echarts&#xff0c;在内置浏览器中&#xff0c;设置保留2位小数能正常显示&#xff08;代码如下&#xff09;&#xff0c;但是在APP端这个设置不起作用。 yAxis: {type: value,axisLabel: {formatter: function (val) {return val.toFixed(2); //y轴始终保留小数点…

测试计划驱动开发模式 TPDD:一种比 TDD 更友好的开发模式

相信大部分开发团队都在使用TDD&#xff0c;并且还有很多开发团队都 对外声明 在使用 TDD 开发模式。 之所以说是“对外声明”&#xff0c;是因为很多开发团队虽然号称使用的是 TDD 开发模式&#xff0c;实际开发过程中却无法满足 TDD 的要求。 实际上&#xff0c;测试驱动的…

Pytorch 猫狗识别案例

猫狗识别数据集https://download.csdn.net/download/Victor_Li_/88483483?spm1001.2014.3001.5501 训练集图片路径 测试集图片路径 训练代码如下 import torch import torchvision import matplotlib.pyplot as plt import torchvision.models as models import torch.nn as…

csapp datalab

知识点总结 1. 逻辑运算符关系 and&#xff08;与&#xff09;、or&#xff08;或&#xff09;和xor&#xff08;异或&#xff09;是逻辑运算符&#xff0c;用于对布尔值进行操作。它们可以在不同的逻辑表达式之间进行转换。下面是and、or和xor之间的转换规则&#xff1a; a…

SpringCloud 微服务全栈体系(九)

第九章 Docker 三、Dockerfile 自定义镜像 常见的镜像在 DockerHub 就能找到&#xff0c;但是我们自己写的项目就必须自己构建镜像了。 而要自定义镜像&#xff0c;就必须先了解镜像的结构才行。 1. 镜像结构 镜像是将应用程序及其需要的系统函数库、环境、配置、依赖打包而…

OpenCV官方教程中文版 —— 分水岭算法图像分割

OpenCV官方教程中文版 —— 分水岭算法图像分割 前言一、原理二、示例三、完整代码 前言 本节我们将要学习 • 使用分水岭算法基于掩模的图像分割 • 函数&#xff1a;cv2.watershed() 一、原理 任何一副灰度图像都可以被看成拓扑平面&#xff0c;灰度值高的区域可以被看成…

深入探索 C++ 多态 ② - 继承关系

前言 上一章 简述了虚函数的调用链路&#xff0c;本章主要探索 C 各种继承关系的类对象的多态特性。 深入探索 C 多态 ① - 虚函数调用链路深入探索 C 多态 ② - 继承关系深入探索 C 多态 ③ - 虚析构 1. 概述 封装&#xff0c;继承&#xff0c;多态是 C 的三大特性&#xf…