来自父组件的样式槽元素答案

【问题标题】：Style slot elements from parent component来自父组件的样式槽元素
【发布时间】：2019-06-16 14:18:32
【问题描述】：

我想让一个组件将某些样式应用于在 slot 属性中传递的元素。

例子：

Component.svelte

<style>
  h1 { color: blue }
  p { color: grey }
</style>

<div>
  <slot></slot>
</div>

然后，我们将包含元素

<script>
  include Component from './component.svelte'
</script>

<Component>
  <h1>My component</h1>
  <p>Lorum Ipsum</p>
</Component>

结果是：

h1 { color: blue }
p { color: grey }

<div>
  <h1>My component</h1>
  <p>Lorum Ipsum</p>
</div>

【问题讨论】：

标签： svelte

【解决方案1】：

您可以将:global 修饰符与div 选择器一起使用，实质上是说该组件的div 内的任何h1 或p 标记都应设置样式。

示例 (REPL)

<!-- Component.svelte -->
<style>
  div :global(h1) { color: blue; }
  div :global(p) { color: grey; }
</style>

<div>
  <slot></slot>
</div>

【讨论】：