Svelte：指定多个条件类属性

Question

我想让这样的事情成为可能：

<div 
   class="overflow-scroll h-screen antialiased ..."
   class:whiteTheme="bg-gray-100 text-gray-800 ..."
   class:darkTheme="bg-blue-900 ..."
>
...
</div>

因此，将始终应用一组类。一组仅当whiteTheme 为真时设置，另一组仅当darkTheme 为真时设置。

我知道我可以定义一个whiteTheme 和一个darkTheme css 类并让它像那样工作

<div 
   class="overflow-scroll h-screen antialiased ..."
   class:whiteTheme
   class:darkTheme
>

但重点是我想单独设计每个元素（尤其是在我的应用程序的开始阶段）。并且必须为不同类中的每个元素定义我的类集......对我来说违背了使用 Tailwind.css 和试验特定元素的目的（无需在 css 定义和元素定义之间来回跳转）。

我可以选择的另一种方式是：

<div 
   class="overflow-scroll h-screen antialiased ... {whiteTheme?'bg-gray-100 text-gray-800 ...':'bg-blue-900 ...'}">

这还不错，但我希望通过在单独的属性中定义事物来提高可读性和可维护性...

所以我想知道是否有办法让它按照我想要的方式工作......例如我可以轻松扩展 Svelte 编译器吗？

最好的 约翰内斯

Answer 1

您很接近您的一个提案，但它与您想要的相反： class:something={condition}

这将在满足 条件 时应用 something 类。

所以在你的情况下你必须这样做

class:bg-gray-100={whiteTheme}
class:text-gray-800={whiteTheme}

你也可以这样做

<script>
 $: whiteThemeClasses = whiteTheme ? "gray text..." : "";
 ...
...class=" fixedclasses {whiteThemeClasses} {blackThemeClasses}

Answer 2

您可以将 light 和 dark 的类列表放入字符串变量中，并根据存储中变量 darkTheme 的真实性在具有三元组的变量之间切换，以便它在更改时更新所有组件。

它允许您为每个组件分别设置浅色和深色主题的样式，大大提高了可读性，因为空格分隔的字符串类似于我们过去在 css 中看到的内容，并且您可以将类列表提升到每个组件的顶部以保持可见性/易于访问。

<script>
    let light = 'bg-gray-100 text-gray-800 shadow-xl';
    let dark = 'bg-blue-900 text-white';
    
    import { darkTheme } from './store.js';
</script>

<div class="overflow-scroll h-screen p-3 {$darkTheme? dark : light}" >
...
</div>

编辑：

**这仅适用于 Tailwind 用户，不适用于您仍在尝试有条件地应用多个类。

Tailwind 2 现在通过 dark classes 为我们解决这个问题。

首先您需要在tailwind.config.js 文件中打开暗模式manual toggling。

然后您可以有条件地将暗类应用到单个顶级容器，并且嵌套在其中的所有组件都可以使用暗：类名称，它将应用暗主题。无需传递状态或将带有暗变量的商店导入每个组件。

这是一个使用固定样式表的 REPL，因为 Tailwind 2 CDN 不将 darkMode 作为类提供。

Answer 3

好的，经过更多挖掘后，我决定采用以下模式：

• 使用 Tailwind 插件 https://github.com/ChanceArthur/tailwindcss-dark-mode。这种解决方案使事情保持顺风（从这个角度来看很好）。代码看起来像

<div 
   class="overflow-scroll 
          h-screen 
          antialiased 
          ... 
          bg-gray-100 
          text-gray-800
          ...
          dark:bg-blue-900
          dark:text-yellow-200
          ..."
>
...
</div>

• 这对于所有“静态”样式都非常有用。对于像active/selected 元素这样的动态事物，我决定使用样式：

import { darkTheme } from '../stores.js';
...
<div
    class:selected
    class:$darkTheme
...
<style>
.selected {
    // all common styles
    @apply cursor-default;

    // all light styles
    @apply text-blue-600;
    @apply border-blue-600;
}

.selected.\$darkTheme {
    // all dark styles
    @apply text-yellow-700;
    @apply border-yellow-700;
}
</style>

我认为使用样式的较小组件也不错。但是我仍然会发现在 Svelte 中定义自定义任务的可能性很有趣......或者像class:true/false={my classes ...}这样的更改语法

一些补充说明：

• 与插件https://github.com/ChanceArthur/tailwindcss-dark-mode 类似，我发现了一篇不错的博客文章，只需使用自定义screen 定义即可产生相同的结果：https://stefanzweifel.io/posts/support-mojave-dark-mode-with-tailwind-css/。

  • 但这完全依赖于媒体查询，所以如果你想在你的应用程序中有一个自定义的明暗开关......我没有办法。

  • 不过，使用这种方法的好处是您可以将@apply 与它结合使用，而您目前无法使用插件... (https://github.com/ChanceArthur/tailwindcss-dark-mode/issues/3)。

Answer 4

你可以这样做：

<h1 class="text-black dark:text-white">Hello world!</h1>

只要按照这个教程here！

Answer 5

这样做：

className={`block text-sm font-medium leading-5 ${
            dark ? 'text-gray-800' : 'text-gray-300'
          }`}

这只是条件类格式化的一个例子，你可以用你的条件和属性样式变量来修改它