使用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走一遍比较安全：

javascript 复制代码

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：

javascript 复制代码

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的组件吗？

不可以，只能一个一个包裹使用：

javascript 复制代码

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

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