====== Plasmo UI ======
====== Plasmo 加载第三方组件库样式的核心 ======

以 [[https://www.radix-ui.com/themes/docs/overview/getting-started|Radix]] 为例

1. 安装依赖
<code>
npm install @radix-ui/themes
</code>
2. 如果是在 Popup、Side Panel、Config 之类的使用，可以直接使用
<code javascript>
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
</code>
3. 如果是在 Content Script 使用，则需要做一些设定
<code javascript>
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 
</code>