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

Question

<style>

  color: red;

</style>

Some html content!

此代码不起作用。在 Angular 框架中，可以通过使用 :host 来完成。选择器。 :global在我的情况下无济于事，因为我只想为编写这些样式的组件设置样式。
我怎样才能在 Svelte 中做到这一点？
谢谢

附注。我是 Svelte 的新手 :)

Answer 1

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

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

这将为所有元素设置样式 hello类并且仅在此组件中。
现在如果我们做这样的事情
App.svelte

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

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

slim

Hello

B.svelte

world

然后 svelte 将其渲染为

<div>Hello world</div>

现在有一种方法可以定义一个选择器来只设置“Hello”而不是“word”的样式。该文档还提到它需要一些东西来附加一个类:

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