Question

我正在创建一个指令，该指令可以调整要应用于其的元素的类。但是，当类更改时，该类的样式不适用。例如：

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

在这种情况下，该类将在DOM中成功更改，但是表单仍将显示。 form.submitting样式甚至都没有融入Svelte生成的CSS。

我知道我可以使用全局样式表来解决此问题，但我很好奇为什么不应用范围样式以及是否有办法使它起作用。

这行得通，但是感觉很笨拙。

<style>
  form {
    display: block;
  }

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

Answer 1

Svelte编译器删除未使用的CSS规则，即带有选择器的规则在组件的标记中不匹配。您应该有一个编译器警告“未使用的CSS选择器”。而且由于编译器看不到动态添加的类，因此您的form.submitting选择器也已删除。

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

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

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

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

Svelte将选择器的div部分的范围限制在当前组件中，这实际上意味着:global(...)部分将仅应用于该组件内部<div>内的表单。

如何根据Svelte中的`use`指令为其类更改的组件设置样式？

1 个答案: