Svelte:指定多个条件类属性

我希望这样的事情成为可能：

<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编译器吗？

最好 Johannes

你与你的一个建议很接近，但它与你想要的相反：class:something={condition}

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

所以在你的情况下，你必须做

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

作为替代方案，您可以做

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

您可以将浅色和深色的类列表放入字符串变量中，并根据商店中变量 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现在通过黑暗类为我们解决这个问题。

首先，您需要在tailwind.config.js文件中打开暗模式的手动切换。

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

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

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

使用顺风插件 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(。

这样做：

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

这只是条件类格式的一个示例，您可以使用条件和属性样式变量对其进行修改

你可以做这样的事情：

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

只需在此处按照本教程进行操作即可！

相关内容

最新更新

热门标签：