如何在Plasmo的Context UI中导入react-quill外部样式库？

针对你遇到的常规CSS导入无效的问题，这里有两种可行的解决方法：

方法一：通过本地CSS文件中转导入 #

1. 在你的Context UI组件（比如popup.tsx）同级目录新建一个styles.css文件
2. 在styles.css中用@import引入react-quill的样式：

@import 'react-quill/dist/quill.snow.css';

3. 回到组件文件，导入这个本地CSS文件：

import "./styles.css";

方法二：动态加载并注入CSS #

利用React的useEffect钩子动态加载CSS内容，然后插入到页面的<head>标签中：

import { useEffect } from "react";
import ReactQuill from "react-quill";

export default function Popup() {
  useEffect(() => {
    import("react-quill/dist/quill.snow.css")
      .then((css) => {
        const styleEl = document.createElement("style");
        styleEl.textContent = css.default;
        document.head.appendChild(styleEl);
        
        // 组件卸载时清理样式
        return () => document.head.removeChild(styleEl);
      })
      .catch(err => console.error("加载Quill样式失败:", err));
  }, []);

  return (
    <div>
      <ReactQuill theme="snow" />
    </div>
  );
}

这两种方法都能在Plasmo的Context UI中正常加载react-quill的样式，你可以根据自己的项目需求选择其中一种。

内容的提问来源于stack exchange，提问作者Edward