Svelte 自定义按钮组件或带有 css 的样式

Question

我对 Svelte 很陌生，我想为网站构建一个主题。当我希望按钮具有一定的外观和动画时，我是否创建一个新的 Button 组件并每次都使用插槽，或者我是否只为此按钮创建一个具有一些 css 代码的类并使用标准 html 按钮？

当然，两种方法都可以，但是哪一种更苗条呢？

Answer 1

您可以使用此策略来为您的应用程序设置主题。您可以用来$$restProps捕获您的类，并且在组件中，您还可以设置按钮的事件。

应用程序.svelte

<script>
    import Button from "./Button.svelte"
</script>


<Button class="primary">
    My Button
</Button>

<Button class="danger">
    My Button
</Button>

按钮.svelte

<script>
    let buttonProps = {
    class:[$$restProps.class]
    }
</script>
    <button on:click
            on:mouseover
            on:mouseenter
            on:mouseleave
        {...buttonProps}>
            <slot/>
    </button>

<style>
    .primary{
        color:green;
    }
    .danger {
        color:red;
    }
</style>

示例REPL。组件是构建大型应用程序的正确方法。