Svelte 中组件的 CSS 为啥会影响全局样式？

夏侯子璇提问于 2026-02-23 17:57:18 阅读 20

框架

我在写 Svelte 组件时，明明把样式写在组件内部了，但发现它居然影响到了页面上其他地方的元素，这不应该啊？不是说 Svelte 的 CSS 是作用域隔离的吗？

比如我写了下面这个按钮组件：

<button class="btn">点击我</button>

<style>
  .btn {
    background: blue;
    color: white;
    padding: 8px 16px;
  }
</style>

结果页面里所有 class=”btn” 的按钮都被改了样式，是我哪里理解错了？

我来解答赞 5 收藏

反馈

1 条解答

欧阳颖萓 Lv1

你漏了 :global() 的反面——Svelte 默认是给选择器加哈希作用域的，但你写的 .btn 是全局匹配，所有带这个类的都会中招。

正确写法是加 :local() 或直接用组件内独有的类名，比如：

<button class="btn-local">点击我</button>



<style>

  .btn-local {

    background: blue;

    color: white;

    padding: 8px 16px;

  }

</style>

或者显式声明局部作用域：

<style>

  :local(.btn) {

    background: blue;

    color: white;

    padding: 8px 16px;

  }

</style>

2026-02-23 17:58