Svelte组件中如何正确传递和使用动态props？

___春明提问于 2026-03-09 23:56:21 阅读 3

框架

我在写一个Svelte的按钮组件，想通过props传入不同的class，但发现样式没生效，是不是我写法有问题？

我试过这样写：export let className = ''，然后在父组件里传，但生成的HTML里class没加上去。

<script>
  export let className = '';
</script>

<button class="{className}">Click me</button>

我来解答赞 8 收藏

反馈

1 条解答

___毓金 Lv1

Svelte里class传递的问题我也踩过坑。你现在的写法其实没问题，但漏了个关键点：Svelte对class处理有特殊语法。

试试这样改：

<script>

export let className = '';

</script>



<button class={className}>Click me</button>

或者更推荐用Svelte的class指令语法：

<button class:your-class-name={condition}>...</button>

常见坑点：
1. 别用引号包着{className}，直接写属性值
2. 如果传多个class，用模板字符串class1 class2
3. 确保父组件传的是字符串而不是对象

我刚从服务端转前端时也被这些细节折磨过，现在看到class条件渲染就条件反射想写v-bind:class...（苦笑）

2026-03-10 00:00