新余建设网站,wordpress更换域名还是之前链接,详情页设计逻辑,商品价格网之前写过一篇文章用来向content内容脚本注入antd的ui#xff1a;https://xiaoshen.blog.csdn.net/article/details/136418199#xff0c;但是方法就是比较繁琐#xff0c;需要将antd的样式拷贝出来#xff0c;然后贴到一个单独的css样式文件中#xff0c;然后引入到内容脚…
之前写过一篇文章用来向content内容脚本注入antd的uihttps://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/cssinjsyarn add ant-design/cssinjspnpm 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 plasmoimport { ThemeProvider } from ~themeexport const config: PlasmoCSConfig {matches: [https://www.plasmo.com/*]
}const HOST_ID engage-csuiexport const getShadowHostId: PlasmoGetShadowHostId () HOST_IDexport const getStyle () {const style document.createElement(style)style.textContent antdResetCssTextreturn style
}const EngageOverlay () (ThemeProviderStyleProvider container{document.getElementById(HOST_ID).shadowRoot}Button typeprimaryEngage/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 cssTextreturn style
} 2.StyleProvider下面可以一下包裹多个antd的组件吗
不可以只能一个一个包裹使用 StyleProvidercontainer{document.getElementById(HOST_ID).shadowRoot}SelectdefaultValue{juejinCategory[0].category_id}style{{ width: 110 }}onChange{cateChange}options{cates}//StyleProvider 3.后面有问题再补充.......
