Svelte组件样式无法覆盖全局样式的解决方案咨询

以下是几种无需使用!important即可让组件本地样式优先的方案：

1. 给组件内元素添加专属类名 #

利用Svelte组件样式的自动作用域特性，给目标元素添加组件专属类名，生成的选择器会带有唯一哈希后缀，特异性高于全局的标签选择器：

<button class="component-btn">操作按钮</button>

<style lang="sass">
  .component-btn
    padding: 1rem
</style>

2. 提升组件选择器的特异性 #

通过复合选择器（结合父元素类名、嵌套选择器）提高选择器权重，超过全局的单一标签选择器：

<div class="btn-wrapper">
  <button>操作按钮</button>
</div>

<style lang="sass">
  .btn-wrapper
    button
      padding: 1rem
</style>

也可以直接给组件根元素加类名，再嵌套选择目标元素：

<div class="my-component">
  <button>操作按钮</button>
</div>

<style lang="sass">
  .my-component
    button
      padding: 1rem
</style>

3. 使用CSS @layer规则管理样式优先级 #

通过CSS层叠规则，将全局样式归到优先级较低的层，组件样式归到优先级更高的层，无需调整选择器即可实现覆盖：
全局app.scss中：

@layer base;
@layer base {
  button {
    padding: 0;
  }
}

组件内样式：

@layer components;
@layer components {
  button {
    padding: 1rem;
  }
}

CSS会自动让后定义/加载顺序靠后的层优先级更高，组件的components层会覆盖全局的base层样式。

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