代码之家 › 专栏 › 技术社区 › RicardoAgra

从父组件设置插槽元素的样式

svelte

RicardoAgra · 技术社区 · 7 年前

我想让一个组件将某些样式应用于在狭槽所有物

例子:

组成部分苗条的

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

0 回复 | 直到 7 年前

Tholle 7 年前

你可以使用 :global 修饰符和 div 从本质上说 h1 或 p 在盒子里贴标签 div 应该对该组件的。

范例( REPL )

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

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

推荐文章

Alex · 在轻量级中同时解构和不解构变量

1 年前

Y-jiji · 调整大小时替换了假选择

1 年前

opensas · SvelteKit:使用vitest时出现错误invite.config.js:“没有重载匹配此调用”

1 年前

Leonardo Cavalcante · Svelte 5:当对图像使用条件渲染时,表单在页面加载时短暂出现然后消失

1 年前

Localghost · 我如何在sveltekit的开发和发布版本中拥有单独的功能?

2 年前

Michael · 单击单选按钮后,保存按钮不会立即更新

2 年前

Patrick Kenny · 如何将全局SCSS文件添加到Svelte/SvelteKit?

2 年前

Michael · 将可读存储添加到可写存储

2 年前

Sam Sabin · 是否可以将Svelte{#each}循环的结果限制一定的量?

2 年前

SuperSIlly2 · Svelte/TS通过foreach循环应用样式不会修改样式

2 年前