0

我在 Svelte 中有以下代码，我正在寻找使用 CSS 类名称（text-error和text-success而不是#ff5722和#10b759，分别）设置笔触颜色的样式。

这可能吗？

我宁愿不在组件中定义确切的颜色，而是让主题通过 CSS 类（DaisyUI）来决定。

Svelte 的新手，所有内容的最新版本。

<script>
    let isStreaming = false;

    function toggleStreaming() {
        isStreaming = !isStreaming;
    }    
</script>

<div class="someClass">
    <button on:click={toggleStreaming} class="btn {isStreaming ?
    ' text-error':
    ' text-success'}">
        <svg xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
             stroke="{isStreaming ? '#ff5722': '#10b759'}" <!-- this part -->
             class="h-6 mr-2">
            <path stroke-width="2"
                  d="{isStreaming ? 'M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636' : 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'}">
            </path>
        </svg>
        {isStreaming ? 'Kill' : 'Stream'}
    </button>
</div>
4

2 回答 2

1

Since Daisy UI is just a Tailwind plugin you can do this the same way you would in Tailwind: By adding stroke-current to the SVG and changing the text color of the button (like you're already doing).

<svg ... class="h-6 mr-2 stroke-current">...

Here's a Svelte REPL using the Daisy UI CDN and your example with that single change https://svelte.dev/repl/814fd418f164491fbf97d39528cde2d3?version=3.46.3

于 2022-02-02T09:01:03.150 回答
1

您可以像在按钮上一样添加课程

<... class="{isStreaming ? 'text-success' : 'text-error'}">

或通过class:指令 >> REPL
( "...但让主题通过 CSS 类决定"必须在类上定义笔画 - 主题就是这种情况？否则可能会使用变量... )

<svg
  ...
  class:text-success={isStreaming}
  class:text-error={!isStreaming}
  ...
>

<style>
    .text-success {
        stroke: #10b759;
    }
    .text-error {
        stroke: #ff5722;
    }
</style>
于 2022-02-02T00:13:14.233 回答