如何在 Svelte 中设置元素内容的样式？

Question

<style>

  color: red;

</style>

Some html content!

此代码无效。在 Angular 框架中，可以使用 :host 选择器来完成。 :global 对我来说无济于事，因为我只想设置组件的样式，这些样式都写在组件中。我如何在 Svelte 中执行此操作？谢谢

PS。我是 Svelte 的新手:)

Answer 1

<style>
  .hello {
    color: red;
  }
</style>

<div class='hello'>Hello world</style>

这将在该组件中使用 hello class 和仅设置所有元素的样式。

现在如果我们这样做

App.svelte

<script>
    import A from './A.svelte'
    import B from './B.svelte'
</script>

<div>
    <A/>
    <B/>
</div>

A.svelte

Hello

B.svelte

world

然后 svelte 将其呈现为

<div>Hello world</div>

并且无法定义选择器以仅设置“Hello”而非“word”的样式。该文档还提到它需要将 class 附加到：

CSS inside a block will be scoped to that component.

This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. svelte-123xyz).

如何在 Svelte 中设置元素内容的样式？

How to style element content in Svelte?

frontend

svelte

svelte-3