解决 Plasmo 项目中 shadcn/ui Sonner 组件样式丢失问题

在开发基于 Plasmo 框架的 Chrome 扩展内容脚本 UI 时，开发者可能会遇到第三方 UI 组件库样式失效的问题。本文将深入分析 shadcn/ui 的 Sonner 通知组件在 Plasmo CSUI 中样式丢失的原因，并提供完整的解决方案。

问题现象分析

当开发者在 Plasmo 的内容脚本 UI 中使用 shadcn/ui 的 Sonner 通知组件时，虽然按钮等基础组件样式正常，但弹出的通知框却失去了应有的样式效果。这是由于 Plasmo 内容脚本 UI 运行在隔离的 DOM 环境中，而 Sonner 组件的样式没有正确注入到这个隔离的 DOM 结构中。

根本原因

Plasmo 的内容脚本 UI 默认使用隔离的 DOM 来实现样式隔离，这带来了两个关键特性：

1. 外部 CSS 不会自动影响到隔离 DOM 内部
2. 隔离 DOM 内部的样式也不会泄露到外部页面

Sonner 组件的样式之所以失效，是因为：

1. 组件自身的 CSS 没有被显式导入
2. 现有的样式作用域处理没有覆盖到隔离 DOM 的特殊选择器

完整解决方案

要解决这个问题，我们需要采取以下步骤：

1. 显式导入 Sonner 组件的 CSS
   通过 data-text 导入方式获取 Sonner 的样式文件内容

2. 正确处理隔离 DOM 的样式作用域
   使用 :host(plasmo-csui) 选择器来确保样式在隔离 DOM 中生效

3. 合并所有需要的样式
   将基础样式和组件样式合并后注入到隔离 DOM 中

具体实现代码如下：

import cssText from "data-text:~main.css";
import sonnerCssText from "data-text:~sonner.css"

export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText
        .replaceAll(":root", ":root,:host(plasmo-csui)")
        .concat(sonnerCssText)
    return style
}

进阶配置建议

对于 Sonner 组件的实际使用，还可以进行更多定制化配置：

<Toaster
    closeButton
    richColors
    visibleToasts={Infinity}
    position="top-right"
    duration={Infinity}
    offset={20}
    gap={14}
    pauseWhenPageIsHidden
    expand
/>

这种配置可以实现：

• 显示关闭按钮
• 使用丰富的颜色主题
• 不限制显示的通知数量
• 固定在右上角位置
• 通知永久显示不自动消失
• 自定义间距和偏移量
• 页面隐藏时暂停计时
• 展开显示所有通知内容

最佳实践总结

在 Plasmo 项目中使用第三方 UI 组件时，建议遵循以下原则：

1. 总是检查组件是否提供了独立的样式文件
2. 明确了解组件的 DOM 结构渲染位置
3. 对于隔离 DOM 环境，确保样式选择器正确处理了作用域
4. 在开发过程中使用完整的组件功能测试样式效果
5. 考虑样式文件的加载顺序和合并策略

通过以上方法，开发者可以确保 shadcn/ui 等现代 UI 组件库在 Plasmo 内容脚本 UI 中正常显示，同时保持样式隔离的优势。