Svelte是否有助于动态CSS样式？

Question

在Svelte中，应如何根据组件状态在元素上更改类？

例如，您可能希望在某些条件下将类应用于按钮，如以下示例所示。

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

现在，这可以通过创建一个计算属性来实现，该属性在某些条件下将返回类名或空字符串。

但是，我担心这是否会污染计算属性的名称空间。例如，如果有一个status，则可能希望同时设置一个动态文本（例如statusMessage）和一个类（例如）statusClass。

有没有更好的方法可以做到这一点，或者计算属性是否可行？Svelte是否计划对CSS提供更明确的支持？

Answer 1

今天你可以使用：

export let whitetext = false;
<div class:whitetext></div>

进而

<MyComponent whitetext={true} />

简单的基于真/假的类的语法。

Answer 2

您可以使用内联表达式，如下所示：

<button class='{{active ? "active": "inactive"}}'>
  {{active ? 'Selected' : 'Select this'}}
</button>

通常，这比使用计算属性好，因为仅通过查看模板即可立即清除可能的值。

如果表达式变得笨拙，也可以使用辅助函数-在某些情况下，您可能更喜欢使用这些函数而不是计算值：

<button class='{{getClass(status)}}'>{{getText(status)}}</button>

<script>
  export default {
    helpers: {
      getClass(status) {
        // ...
      },
      getText(status) {
        // ...
      }
    }
  };
</script>