如何为导入的Svelte组件添加自定义类名？

你遇到的问题是因为子组件btn.svelte没有处理外部传入的class属性，直接传参会触发报错。要实现合并类名的效果，只需要修改子组件，让它支持接收外部类名并和自身的btn类合并即可，有两种简单的实现方式：

方式一：用$$props自动接收所有属性（最省事） #

修改btn.svelte的代码：

<button class="btn {$$props.class}" />

$$props是Svelte内置对象，包含所有父组件传入的属性，这样就能把外部传的class和内部的btn类自动合并。

之后在btnHold.svelte里直接调用：

<Btn class="btn--hold" />

方式二：显式导出类名变量（更清晰可控） #

如果不想用$$props，可以显式导出一个变量来接收类名，比如用className避免和关键字冲突：

<!-- btn.svelte -->
<script>
  export let className = '';
</script>

<button class="btn {className}" />

对应的父组件调用改成：

<Btn className="btn--hold" />

当然你也可以直接用class作为导出变量（Svelte支持这种写法）：

<!-- btn.svelte -->
<script>
  export let class = '';
</script>

<button class="btn {class}" />

父组件正常传class即可：

<Btn class="btn--hold" />

不管用哪种方式，最终渲染出来的按钮都会是你想要的效果：

<button class="btn btn--hold" />

另外提一句，你原来写的{btn}是多余的——因为没有定义btn变量，这也是触发报错的原因之一，直接写静态类名btn--hold就可以了。

内容的提问来源于stack exchange，提问作者Anpace