<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="FeedCreator 1.8" -->
<?xml-stylesheet href="https://www.bestony.com/lib/exe/css.php?s=feed" type="text/css"?>
<rdf:RDF
    xmlns="http://purl.org/rss/1.0/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
    xmlns:dc="http://purl.org/dc/elements/1.1/">
    <channel rdf:about="https://www.bestony.com/feed.php">
        <title>白宦成的数字花园 - chrome:crx:plasmo</title>
        <description></description>
        <link>https://www.bestony.com/</link>
        <image rdf:resource="https://www.bestony.com/_media/wiki:dokuwiki.svg" />
       <dc:date>2026-05-27T18:35:56+00:00</dc:date>
        <items>
            <rdf:Seq>
                <rdf:li rdf:resource="https://www.bestony.com/chrome:crx:plasmo:ui?rev=1742400241&amp;do=diff"/>
            </rdf:Seq>
        </items>
    </channel>
    <image rdf:about="https://www.bestony.com/_media/wiki:dokuwiki.svg">
        <title>白宦成的数字花园</title>
        <link>https://www.bestony.com/</link>
        <url>https://www.bestony.com/_media/wiki:dokuwiki.svg</url>
    </image>
    <item rdf:about="https://www.bestony.com/chrome:crx:plasmo:ui?rev=1742400241&amp;do=diff">
        <dc:format>text/html</dc:format>
        <dc:date>2025-03-19T16:04:01+00:00</dc:date>
        <dc:creator>Anonymous (anonymous@undisclosed.example.com)</dc:creator>
        <title>ui</title>
        <link>https://www.bestony.com/chrome:crx:plasmo:ui?rev=1742400241&amp;do=diff</link>
        <description>Plasmo UI

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

以 Radix 为例

1. 安装依赖


npm install @radix-ui/themes


2. 如果是在 Popup、Side Panel、Config 之类的使用，可以直接使用


import { useState } from &quot;react&quot;
import &#039;@radix-ui/themes/styles.css&#039;;
import { Theme } from &#039;@radix-ui/themes&#039;;
import { Flex, Text, Button } from &#039;@radix-ui/themes&#039;;

function IndexPopup() {
  const [data, setData] = useState(&quot;&quot;)

  return (
    &lt;div style={{
      width:&quot;500px&quot;,
      height:&quot;300px&quot;
    }}&gt;
      &lt;Theme&gt;
      &lt;Flex direction=&quot;column&quot; gap=&quot;2&quot;&gt;
 …</description>
    </item>
</rdf:RDF>
