Svelte 中的全球后裔专用样式

Question

Svelte 中有没有办法添加仅影响当前组件和任何后代组件的样式？

\n

Svelte 支持本机:global()选择器包装器，它将在全局范围内声明该选择器的样式，但我正在寻找类似的东西，它仅与当前或任何后代组件中的选择器匹配。

\n

例如（REPL）：

\n

---

\n

应用程序.svelte

\n

<script>\n    import C1 from \'./C1.svelte\';\n    let name = \'world\';\n</script>\n\n<div><C1>Hello {name}!</C1></div>\n

\n

C1.纤细

\n

<script>\n    import C2 from \'./C2.svelte\';\n    let name = \'world\';\n</script>\n\n<style>\n    :global(div) {\n        padding: 10px;\n        background-color: blue;\n    }\n    div {\n        background-color: red;\n    }\n</style>\n\n<div><C2><slot /></C2></div>\n

\n

C2.纤细

\n

<div><slot /></div>\n

\n

---

\n

在上面的示例中，所有三个组件都从中间子组件C1.svelte接收全局样式。我正在寻找一种方法来执行某种混合样式（不将样式传递给子组件）以添加仅影响组件树中向下的组件的“全局向下”样式。

\n

当:global()不使用选择器包装器时，匹配的节点会被分配一个唯一的类，然后该类是选择器的目标，并在编译期间添加到选择器中。我的要求/建议是这样的：

\n

:find(div) {\n  background-color: blue;\n}\n

\n

\xe2\x80\xa6where:find()类似地为相同或降序组件中匹配的任何 HTML 元素分配一个唯一的类。这可能吗？

\n

Answer 1

:global()通过与作用域选择器组合，您可以将样式的范围限制为仅子组件。例如，以下选择器将应用于任何组件中作为该组件中的 div 的后代的所有 div。

<style>
    div :global(div) {
        padding: 10px;
        background-color: blue;
    }
</style>

选择器被转换成这样：

div.svelte-hash div { /* etc */ }

如果您还想在此组件中定位顶级 div，您可以编写如下规则（尽管这可能会产生 CSS 特异性影响）：

<style>
    div, div :global(div) {
        padding: 10px;
        background-color: blue;
    }
</style>