Question

我正在尝试向Svelte组件的{@hml ...}标签内部呈现的HTML标签添加一些样式，但是看来它仅继承父样式（{@html的容器）。 ..} 标签）。此外，还会弹出“未使用的CSS选择器”错误，显示我在Svelte {@html ...}标签内该特定HTML标签的样式选择器根本不起作用。 Svelte是否以这种方式构建，是否有一种样式设置Svelte {@html ...}标签内部呈现的标签的方法？

我已经尝试了Svelte官方教程中提供的步骤，但是并没有清楚地说明如何做到这一点。

<style>
    p{
        color: red;
    }
    h1{
        color: blue;
    }
</style>

<script>
    let string = "<h1>what</h1>";   
</script>

<p>{@html string}</p>
<p>no</p>

我希望h1标签为蓝色，而不是从p标签继承红色

Answer 1

您需要使用:global(...)修饰符。如果您这样做...

:global(h1) { color: blue }

...它将应用于页面上的所有<h1>元素-{@html ...}标记内的元素以及其他组件中存在的元素。

要将其限制为该组件内部的元素，请将选择器放在本地的内部：

p :global(h1) { color: blue }

该选择器仅适用于属于该组件的<h1>个元素内的<p>个元素。 Here's a demo

Answer 2

这可能是一个错误（但Svelte似乎很难知道该字符串中可能包含的内容）。

作为（丑陋的）解决方法，您可以选择内联指定所需的样式。例如，

<script>
    let string = `<h1 style="color:blue;">what</h1>`;   
</script>

编辑：斯维尔特creator回答了使用:global的官方方式。

通过为组件内的<style>标记（未使用的CSS选择器）设置样式，来对Svelte组件的{@html ...}标记进行样式化

2 个答案: