10

このようなことを可能にしたいと思います：

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

したがって、常に適用されるクラスの 1 つのセットです。1 つは true の場合にのみ設定されwhiteTheme、もう 1 つは true の場合にのみ設定されdarkThemeます。

私は awhiteThemeとdarkThemecss クラスを定義して、それをそのように機能させることができることを知っています

<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コンパイラを簡単に拡張できますか?

最高のヨハネス

4

5 に答える 5

11

あなたはあなたの提案の 1 つに近づいていますが、それはあなたが望むものとは反対のことをします: class:something={condition}

これにより、条件が満たされたときにsomethingクラスが適用されます。

だからあなたの場合、あなたはしなければならないでしょう

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

あなたができる代替手段として

<script>
 $: whiteThemeClasses = whiteTheme ? "gray text..." : "";
 ...
...class=" fixedclasses {whiteThemeClasses} {blackThemeClasses}
于 2020-01-28T10:05:13.490 に答える
2

OK、さらに掘り下げた後、次のパターンを使用することにしました。

<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 ...}

いくつかの追加メモ:

于 2020-02-07T01:31:29.367 に答える