之前写过一篇文章用来向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.后面有问题再补充.......