使用类为父级设计子级

Question

在 Svelte 中，我可以将自定义类传递给子组件，如下所示：

图标.svelte

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

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

应用程序.svelte

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

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

如果我检查渲染的 DOM，我会发现该类已成功分配给组件Icon：

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

但是如果我为.custom-iconin定义某种样式App.svelte，它们就不会被应用：

<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>

检查代码和框。

那么有人知道如何使用类为父组件设计子组件的样式吗？

Answer 1

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

\n

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

\n

这将输出如下 CSS：

\n

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

\n

这将允许您为组件的后代定义 CSS 范围。但是，不可能仅将其范围限定为直接子代，而只能将其限定为所有后代。

\n

Answer 2

您有两个选择：

• 定义您将在子组件中使用的样式（请参阅 REPL） -这些样式将作用于组件

或者

• 使用修饰符定义样式:global，使它们可用于定义样式的组件的所有后代（请参阅 REPL） -这些样式将取消作用域