使用类设置来自父级的子级的样式

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>

检查代码沙盒。

那么，有人知道我如何使用类从父组件样式化子组件吗？

Answer 1

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

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

这将输出如下的CSS：

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

这将允许您为组件的子代设置作用域CSS。不过，不可能只针对直系亲属，只针对所有后代。

Answer 2

您有两个选项：

• 定义将在子组件中使用的样式(请参阅REPL(-这些样式将在组件中使用

或

• 使用:global修饰符定义样式，使其可用于定义样式的组件的所有子体(请参见REPL(-这些样式将不受限制

Answer 3

尝试这个

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

另请参阅https://svelte.dev/docs#style