如何根据Svelte中的`use`指令对其类更改的组件进行样式设置?

问题描述 投票:0回答:1

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

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。

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

这可行,但是感觉很hack。

<style>
  form {
    display: block;
  }

  :global(form.submitting) {
    display: none;
  }
</style>
javascript svelte
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.