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

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>

延迟.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>内的表单。