用户工具

站点工具


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

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki