javascript - 使用类从 parent 那里为 child 设计样式

Question

在 Svelte 中，我可以像这样将自定义类传递给子组件:

Icon.svelte

<script>
  export { className as class };
  
  let className = '';
</script>

<img src='...' class={className} />

App.svelte

<script>
  import Icon from './Icon/Icon'
</script>

<div id='app'>
  <Icon class='custom-icon' />
</div>

如果我检查呈现的 DOM，我会看到该类已成功提供给 Icon 组件:

<img src='...' class='custom-icon' />

但是如果我在 App.svelte 中为 .custom-icon 定义了一些样式，它们将不会被应用:

<script>
  import Icon from './Icon/Icon'
</script>

<style>
  .custom-icon {
    border: solid 2px red;
  }
</style>

<main>
  <Icon class='custom-icon' /> <!-- Icon has no red border -->
</main>

检查 codesandbox .

有人知道如何使用类从父组件设置子组件的样式吗？

Answer 1

我认为有一种方法可以两全其美。

* :global(.custom-icon) {
   border: solid 2px red;
}

这将输出这样的 CSS:

.svelte-5z4ccp .custom-icon {
   border: solid 2px red;
}

这将允许您为组件的后代设置 CSS 范围。但是，不可能只针对直系子级将其限定在所有后代中。