如何根据 Svelte 中的“use”指令设置 class 变化的组件样式？

Question

我正在创建一个指令来调整它所应用的元素的 class。但是，class 的样式在 class 更改时不适用。例如：

Form.svelte

<form id='sign-in' use:delayed={ handleSubmit }>
  <label for='sign-in-name'>Your Name</label>
  <input required id='sign-in-name' type='text' />

  <input type='submit' value='Sign In' />
</form>

<style>
  form {
    display: block;
  }

  form.submitting {
    display: none;
  }
</style>

Delayed.js

export default function(node, action) {
  node.addEventListener('submit', async function(event) {
    event.preventDefault()
    const originalClass = node.className

    node.className = `${ originalClass } submitting`
    await action()
    node.className = originalClass
  })
}

在这种情况下，class会在DOM中更改成功，但表格仍会显示。 form.submitting 样式甚至没有进入 Svelte 生成的 CSS。

我知道我可以使用全局样式表来解决这个问题，但我很好奇为什么范围样式不适用，以及是否有办法让它以这种方式工作。

这行得通，但感觉很糟糕。

<style>
  form {
    display: block;
  }

  :global(form.submitting) {
    display: none;
  }
</style>

Answer 1

Svelte 编译器删除未使用的 CSS 规则，即选择器在组件标记中不匹配的规则。你应该有一个关于那个的编译器警告 "Unused CSS selector"。由于编译器无法看到动态添加的类，因此您的 form.submitting 选择器已被删除。

解决方案确实是使您的动态选择器 :global(...)。

如果您希望您的样式仅适用于此组件及其子组件的范围，您需要一个可以像这样引用的包装元素：

<div>
  <form>...</form>
</div>

<style>
  div :global(form.submitting) { ... }
</style>

Svelte 会将选择器的 div 部分限定为当前组件，这实际上意味着 :global(...) 部分将仅应用于此组件内的 <div> 内的表单。

如何根据 Svelte 中的“use”指令设置 class 变化的组件样式？

How can I style a component whose class changes based on a `use` directive in Svelte?

javascript

svelte