chrome:crx:plasmo:ui
Plasmo UI
Plasmo 加载第三方组件库样式的核心
以 Radix 为例
1. 安装依赖
npm install @radix-ui/themes
2. 如果是在 Popup、Side Panel、Config 之类的使用,可以直接使用
import { useState } from "react" import '@radix-ui/themes/styles.css'; import { Theme } from '@radix-ui/themes'; import { Flex, Text, Button } from '@radix-ui/themes'; function IndexPopup() { const [data, setData] = useState("") return ( <div style={{ width:"500px", height:"300px" }}> <Theme> <Flex direction="column" gap="2"> <Text>Hello from Radix Themes :)</Text> <Button>Let's go</Button> </Flex> </Theme> </div> ) } export default IndexPopup
3. 如果是在 Content Script 使用,则需要做一些设定
import styleText from "data-text:@radix-ui/themes/styles.css" // 使用 data-text 引入样式 import { Button, Theme } from '@radix-ui/themes'; import { BookmarkIcon } from '@radix-ui/react-icons'; import type { PlasmoGetStyle } from "plasmo" export const getStyle: PlasmoGetStyle = () => { const style = document.createElement("style") style.textContent = styleText.replaceAll(':root', ':host(plasmo-csui)'); // 将样式作为text-content 置入。并使用 replace all 将默认的 :root 替换为 :host(plasmo-csui) return style } const CustomButton = () => { return (<Theme> <Button variant="classic"> <BookmarkIcon /> Hello World </Button> </Theme>) } export default CustomButton
/app/www/public/data/pages/chrome/crx/plasmo/ui.txt · 最后更改: 2024/12/23 23:07 由 bestony