Svelte中如何转发style属性？打造更灵活的UI组件库

要实现你想要的效果，有两种常用方案，从通用到特定场景都能覆盖：

1. 最通用的方案：使用$$restProps自动转发所有属性 #

Svelte提供了$$restProps这个特殊变量，它包含所有未通过export let声明的组件传入属性，包括你用style:xxx语法传入的单个样式属性。直接把它展开到内部的DOM元素上即可：

Row.svelte

<div class='row' {...$$restProps}>
  <slot></slot>
</div>

这样在App.svelte里写<Row style:color='red'>Hello World!</Row>时，style:color会被自动转发到内部的<div class='row'>上，最终渲染出带红色文字的行。而且这个方案还能自动转发其他属性（比如class、aria-*、id等），极大提升组件的通用性。

2. 特定属性转发：手动声明并传递 #

如果只需要转发特定的style属性（比如只允许color），可以在子组件里显式声明该属性，再绑定到内部元素：

Row.svelte

<script>
  export let color;
</script>

<div class='row' style:color={color}>
  <slot></slot>
</div>

这种方式更严谨，但灵活性不如第一种，适合对组件属性有严格控制的场景。

补充：仅转发style相关属性 #

如果不想转发非style属性，可以从$$restProps里过滤出所有以style:开头的属性再展开：

Row.svelte

<script>
  // 提取所有style开头的属性
  const styleProps = Object.fromEntries(
    Object.entries($$restProps).filter(([key]) => key.startsWith('style:'))
  );
</script>

<div class='row' {...styleProps}>
  <slot></slot>
</div>

内容的提问来源于stack exchange，提问作者Chase R Lewis