Svelte：不使用:global在父组件中样式化子组件传入的类

方案1：用父组件作用域类限定子组件样式 #

不用把整个.child-component-class设为全局，而是用父组件的作用域类作为前缀，只让样式作用在当前父组件下的子组件上：

<style lang="scss">
.parent-component-class :global(.child-component-class) {
  color: red;
  padding: 10px;
}
</style>

原理是：父组件的.parent-component-class会被Svelte自动加上专属的作用域属性（比如class="parent-component-class svelte-xxxxxx"），而:global()只是让内部的.child-component-class不被添加作用域标记，但因为被父组件的作用域类包裹，所以样式只会匹配当前父组件下带有.child-component-class的元素，不会影响全局其他地方的同名类。

方案2：子组件暴露样式插槽（更灵活） #

如果需要更灵活的样式控制，可以在子组件里预留样式插槽，让父组件直接给子组件的根元素写样式：

Child.svelte

<div class={childClass}>
  <slot />
</div>

<style>
/* 子组件基础样式 */
div {
  box-sizing: border-box;
}
</style>

Parent.svelte

<script>
import Child from './Child.svelte';
</script>

<div class="parent-component-class">
  <Child>
    <style>
      div {
        color: blue;
        border: 1px solid #ccc;
      }
    </style>
  </Child>
</div>

这种方式下，父组件插槽里的样式会直接作用在子组件的根元素上，完全受父组件的作用域限制，不需要额外的全局标记。

方案3：传递CSS变量（适合简单样式） #

如果只是少数几个样式属性，可以通过CSS变量传递，子组件使用变量：

Parent.svelte

<style lang="scss">
.parent-component-class {
  --child-text-color: green;
  --child-padding: 8px;
}
</style>

<div class="parent-component-class">
  <Child />
</div>

Child.svelte

<div class={childClass}>
  子组件内容
</div>

<style>
.child-component-class {
  color: var(--child-text-color, #333);
  padding: var(--child-padding, 0);
}
</style>

这种方式不需要修改作用域，通过变量传递样式，也能实现父组件控制子组件样式，且仅在当前父组件范围内生效。

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