班级组合不应用新风格

Question

我有一个这样定义的细长按钮：

    <span class="nav-button" on:click={e => setActive(e.target,"nav-button")}>
        ...
    </span>

当运行下面的 setActive() 函数以应用 .active 类时：

    // Toggles the active status of an element
    function setActive(e, bubble?:string) {

        // Optionally bubbles to spesified parent element
        if(bubble) while(!e.classList.contains(bubble)) e = e.parentElement;

        (e.classList.contains("active"))? e.classList.remove("active"):e.classList.add("active");
    }

它添加了 .active 类，但不添加样式。

.nav-button 在 SCSS 中定义为：

    .nav-button {   
        box-shadow: -7px -7px 20px 0px var(--shadow-primary),
        -4px -4px 5px 0px var(--shadow-primary),
        7px 7px 20px 0px #0002,
        4px 4px 5px 0px #0001,
        inset 0px 0px 0px 0px var(--shadow-primary),
        inset 0px 0px 0px 0px #0001,
        inset 0px 0px 0px 0px var(--shadow-primary),
        inset 0px 0px 0px 0px #0001;

        transition:box-shadow 0.25s cubic-bezier(.79,.21,.06,.81);


        &.active {
            box-shadow: 0px 0px 0px 0px var(--shadow-primary),
            0px 0px 0px 0px var(--shadow-primary),
            0px 0px 0px 0px #0001,
            0px 0px 0px 0px #0001,
            inset -7px -7px 20px 0px var(--shadow-primary),
            inset -4px -4px 5px 0px var(--shadow-primary),
            inset 7px 7px 20px 0px #0003,
            inset 4px 4px 5px 0px #0001 !important;
        }
    }

有关视频示例，请参见 here。

如果有人可以帮助我，将不胜感激！

Answer 1

非常感谢@dagalti 提供answer！

.nav-button 类必须更改为：

    :global(.nav-button) { 
        box-shadow: -7px -7px 20px 0px var(--shadow-primary),
            -4px -4px 5px 0px var(--shadow-primary),
            7px 7px 20px 0px #0002,
            4px 4px 5px 0px #0001,
            inset 0px 0px 0px 0px var(--shadow-primary),
            inset 0px 0px 0px 0px #0001,
            inset 0px 0px 0px 0px var(--shadow-primary),
            inset 0px 0px 0px 0px #0001;

            transition:box-shadow 0.25s cubic-bezier(.79,.21,.06,.81);


            &.active {
                box-shadow: 0px 0px 0px 0px var(--shadow-primary),
                0px 0px 0px 0px var(--shadow-primary),
                0px 0px 0px 0px #0001,
                0px 0px 0px 0px #0001,
                inset -7px -7px 20px 0px var(--shadow-primary),
                inset -4px -4px 5px 0px var(--shadow-primary),
                inset 7px 7px 20px 0px #0003,
                inset 4px 4px 5px 0px #0001 !important;
            }
        }

您可以查看工作示例here。

Answer 2

您需要:global 的原因是因为编译器看到.active 类没有在标记中的任何地方使用，它将删除它，添加:global 修饰符告诉编译器：这个类被应用在某个地方你看不到的，请保留它。

请注意，使用:global 方法也会从您的样式中删除范围，这意味着如果此类出现在您项目的其他地方，它也会应用到那里，这就是这确实是最后手段的主要原因。

但是对于你不需要的情况，你只需要完全接受 Svelte。

首先要记住的是，在使用 Svelte 时，在 JavaScript 中进行 DOM 操作通常是一种不好的做法，相反，您应该依赖组件的状态来更新自己。

也就是说，您可以废弃 setActive 函数并将其替换为单个变量：

  let active

目标是简单地在 active 中放置当前元素的某种标识。我们可以简单地通过更改on:click

<span on:click={() => active = 1}>...</span>
<span on:click={() => active = 2}>...</span>

（用你想要的任何东西改变数字，比如字符串或id）

最后使用 Svelte 的 条件类 功能

<span class:active={active === 1}>...</span>

使用表示法：class:xxx={condition}> 将在 condition 计算结果为 true 时将类 xxx 添加到您的元素中。

所以总代码是：

<script>
  let active
</script>

<span class:active={active === 1} class="nav_button" on:click={() => active = 1}>...</span>
<span class:active={active === 2} class="nav_button" on:click={() => active = 2}>...</span>
<span class:active={active === 3} class="nav_button" on:click={() => active = 3}>...</span>

<style>
 /* here your styles */
</style>

这样active 类实际上在标记中使用，编译器不会为您删除它，从而降低了在其他地方应用相同规则的风险，因为该类仍将作用于该组件。

（我个人也觉得这样让代码更容易理解）