使用ant-design/cssinjs向plasmo浏览器插件的内容脚本content中注入antd的ui组件样式

之前写过一篇文章用来向content内容脚本注入antd的ui:https://xiaoshen.blog.csdn.net/article/details/136418199,但是方法就是比较繁琐,需要将antd的样式拷贝出来,然后贴到一个单独的css样式文件中,然后引入到内容脚本中。但是细心的网友给出了一个评论,说官方有现成的引入方式,把我开心坏了,赶紧研究一下:https://github.com/PlasmoHQ/examples/blob/main/with-antd/content.tsx

环境准备

需要使用antd5.0以后的版本,并且需要单独使用GitHub - ant-design/cssinjs这个依赖库,需要先安装:

npm install @ant-design/cssinjs


yarn add @ant-design/cssinjs


pnpm add @ant-design/cssinjs

引入到content

需要注意,先按部就班的使用官方给的demo走一遍比较安全:

import { StyleProvider } from "@ant-design/cssinjs"
import Button from "antd/es/button"
import antdResetCssText from "data-text:antd/dist/reset.css"
import type { PlasmoCSConfig, PlasmoGetShadowHostId } from "plasmo"

import { ThemeProvider } from "~theme"

export const config: PlasmoCSConfig = {
  matches: ["https://www.plasmo.com/*"]
}

const HOST_ID = "engage-csui"

export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = antdResetCssText
  return style
}

const EngageOverlay = () => (
  <ThemeProvider>
    <StyleProvider container={document.getElementById(HOST_ID).shadowRoot}>
      <Button type="primary">Engage</Button>
    </StyleProvider>
  </ThemeProvider>
)

export default EngageOverlay

注意:

里面引入了这几个比较重要的内容

import { StyleProvider } from "@ant-design/cssinjs"
import Button from "antd/es/button"
import antdResetCssText from "data-text:antd/dist/reset.css"

import type { PlasmoCSConfig, PlasmoGetShadowHostId } from "plasmo"

StyleProvider: 样式提供器,用于将antd的css样式注入到组件上,一个提供器里面只能包裹一个组件。

Button: antd的按钮组件,

antdResetCssText: antd的css样式文件,文本形式,这个后面可以自己定义的css样式做加法。

PlasmoGetShadowHostId: 用于定位antd的元素

比如我这里真实使用场景:样式已经出来了

引发的问题

1.因为getStyle只能写一个,所以如果引入了antdResetCssText,自定义的css样式该如何引入?

可以在getStyle中做加法处理,比如我自己定义的css文件是cssText:

import cssText from 'data-text:~/contents/index.scss'
import antdResetCssText from 'data-text:antd/dist/reset.css'

// load style file
export const getStyle = () => {
    const style = document.createElement('style')
    style.textContent = antdResetCssText + cssText
    return style
}

2.StyleProvider下面可以一下包裹多个antd的组件吗?

不可以,只能一个一个包裹使用:

                   <StyleProvider
                        container={document.getElementById(HOST_ID).shadowRoot}
                    >
                        <Select
                            defaultValue={juejinCategory[0].category_id}
                            style={{ width: 110 }}
                            onChange={cateChange}
                            options={cates}
                        />
                    </StyleProvider>

3.后面有问题再补充.......

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/707630.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Apple - Metal Programming Guide

本文翻译整理自&#xff1a;Metal Programming Guide&#xff08;更新日期&#xff1a;2016-12-12 https://developer.apple.com/library/archive/documentation/Miscellaneous/Conceptual/MetalProgrammingGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP400142…

next.js开发中页面回退时报Unhandled Runtime ErrorTypeError destroy is not a function

Next.js开发中页面回退时报Unhandled Runtime Error:TypeError: destroy is not a function 问题描述 在Next.js开发中&#xff0c;从A页面跳转到B页面&#xff0c;再使用浏览器回退到A页面时报上述错误&#xff1a; 错误原因 是因为在B页面里&#xff0c;在使用useEffect时…

从“数据孤岛”、Data Fabric(数据编织)谈逻辑数据平台

提到逻辑数据平台&#xff0c;其核心在于“逻辑”&#xff0c;与之相对的便是“物理”。在过去&#xff0c;为了更好地利用和管理数据&#xff0c;我们通常会选择搭建数据仓库和数据湖&#xff0c;将所有数据物理集中起来。但随着数据量、用数需求和用数人员的持续激增&#xf…

掌握midjourney系列:8 个角色设计关键词

Midjourney V6的角色引用功能非常强大&#xff0c;可以让多张图片生成的角色风格保持一致。在实现同一角色的多张场景图片之前&#xff0c;我们需要先设计好基础角色。 以下是我总结的Midjourney中人物设计套路的常用提示&#xff0c;很高兴与大家分享。 1、角色设定表&#…

南京威雅学校:初中转轨国际化教育,她们打开了成长的另一种可能

“上了大学就轻松了。” 又是一年高考季&#xff0c;每每回想起十八岁前那些没日没夜埋头学习的日子&#xff0c;已经为人父母的你是不是也忍不住想要孩子气地吐槽一句&#xff0c;“骗人”——人不会在一场考试后瞬间长大&#xff0c;试卷里也没有人生的全部答案。 三年前&a…

Java-多线程

概念 进程&#xff1a;程序的基本执行实体 线程&#xff1a;操作系统能够进行运算调度的最小单位&#xff0c;被包含在进程之中&#xff0c;是进程的实际运作单位 并发&#xff1a;同一时刻&#xff0c;多个指令在单个CPU上交替执行。 并行&#xff1a;同一时刻&#xff0c;多…

博物馆藏品管理的重要性

博物馆是人们了解历史文化、传承文明的重要场所。而博物馆的藏品管理是博物馆的核心工作之一&#xff0c;对于展现博物馆的魅力、吸引观众的眼球有着至关重要的影响。并且博物馆藏品管理是一项复杂且专业的工作&#xff0c;它涉及到多个方面&#xff0c;包括但不限于藏品的收集…

前沿重器[49] | 聊聊搜索系统2:常见架构

前沿重器 栏目主要给大家分享各种大厂、顶会的论文和分享&#xff0c;从中抽取关键精华的部分和大家分享&#xff0c;和大家一起把握前沿技术。具体介绍&#xff1a;仓颉专项&#xff1a;飞机大炮我都会&#xff0c;利器心法我还有。&#xff08;算起来&#xff0c;专项启动已经…

Unity 踩坑记录 用自定义类 创建的List不显示在 inspector面板

在 自定义类上面添加 【Serializable 】 扩展&#xff1a; 1&#xff1a;Serializable 序列化的是可序列化的类或结构。并且只能序列化非抽象非泛型的自定义的类 2&#xff1a;SerializeField是强制对私有字段序列化

单例模式、工厂模式 c++关键字 static

static 关键字的作用&#xff1a; 主要作用在于 控制变量或函数的作用域、生命周期以及它们如何被不同部分的程序访问&#xff0c;从而帮助程序员管理内存、避免命名冲突&#xff0c;并实现特定的设计模式&#xff08;如单例模式&#xff09;。 1. 静态局部变量&#xff1a;当…

工具推荐-文件捆绑工具

前提 在之前有突发奇想过&#xff0c;有没有那种我发给别人一个pdf文件&#xff0c;别人点击后看到的是pdf文件的内容&#xff0c;我这边也看到了上线的提示。于是就去研究pdf能加入哪些特殊的功能。看了一段时间后发现pdf的一些不一样的功能 像是打开pdf后弹出一个框 或者是…

什么是端口转发?路由器如何正确的设置端口转发和范围转发?(外网访问必备设置)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 端口转发 📒🚀 端口转发的应用场景💡 路由器如何设置端口转发(示例)💡 端口范围转发(示例)🎯 范围转发的应用场景🛠️ 设置范围转发📝 范围转发实操示例🎈 注意事项 🎈⚓️ 相关链接 ⚓️📖 介绍 📖 …

wmv转换mp4怎么操作?3个格式转换方法分享

wmv转换mp4怎么操作&#xff1f;将WMV转换为MP4格式&#xff0c;可以方便我们在多种设备和平台上流畅播放视频。MP4格式具有广泛的兼容性和优化过的编码&#xff0c;使其在各种媒体播放器、智能手机、平板电脑以及电视上都能得到良好的支持。此外&#xff0c;MP4格式的视频文件…

手机直播不用麦克风可以吗?一文看懂无线麦克风哪个好

市面上对于无线麦克风的需求有增无减&#xff0c;原因是直播、短视频行业火爆&#xff0c;许多人都开始加入这一行业&#xff0c;不过对于麦克风这类产品的疑问也越来越多。例如&#xff1a;无线麦克风怎么选&#xff1f;实不实用&#xff1f;手机直播不用麦克风可以吗&#xf…

安卓启动流程

还是以高通为例子。这次整理并不是很完善&#xff0c;下来会参考一些文档再整理。。。 高通平台启动过程_高通平台启动流程-CSDN博客 https://www.cnblogs.com/schips/p/how_qualcomm_soc_boot.html 1. 初始启动阶段&#xff08;Boot ROM&#xff09; 处理器复位&#xff1a;…

OpenCV图像变换

一 图像的缩放 resize(src,dst,dsize,fx,fy,interpolation) fx&#xff1a;x轴的缩放因子 fy&#xff1a;y轴的缩放因子 interpolation 插值算法 INTER_NEAREST,临近插值&#xff0c;速度快&#xff0c;效果差 INTER_LINEAR,双线性插值&#xff0c;原图中的4个点 INTER_CUBIC…

【原创】springboot+mysql社区住户综合管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

Java接口实现与类继承

学习初期发现接口实现与类继承很像&#xff0c;随着学习深入发现它们之间的联系与区别&#xff0c;整理如下&#xff1a; 经实验发现&#xff0c;实现接口的类中含有接口中的所有属性和方法&#xff0c;继承父类的子类中也含有父类中所有的属性和方法&#xff0c;可以说接口实…

【SpringBoot + Vue 尚庭公寓实战】公寓杂费接口实现(八)

【SpringBoot Vue 尚庭公寓实战】公寓杂费接口实现&#xff08;八&#xff09; 文章目录 【SpringBoot Vue 尚庭公寓实战】公寓杂费接口实现&#xff08;八&#xff09;1、公寓杂费业务介绍2、公寓杂费逻辑模型介绍3、接口实现3.1、保存或更新杂费值3.2、保存或更新杂费名称3…

Python学习之旅:你的大学计算机专业宝藏路线图

在信息时代的浪潮中&#xff0c;Python以其强大的功能和极简的语法成为了无数程序员心中的白月光。作为大学计算机专业的学生&#xff0c;掌握Python不仅能够为未来的职业生涯铺路&#xff0c;更能让您在学术研究和实际应用中如鱼得水。今天&#xff0c;我将与大家分享一套实用…