传递的 css 参数未在组件中使用

Question

我想将 css 参数向下传递给组件，阅读此页面后： https://github.com/sveltejs/rfcs/blob/master/text/0000-style-properties.md

我怎么不明白。

传递的 css 永远不会出现，而是显示默认的后备颜色：

<!-- Heroitem.svelte -->
<style>
.blabla{
    background-image: var(--background-image, linear-gradient(150deg,#ffffff,#ab12b94f));
}
</style>

我尝试了什么？首先，我定义项目的内容：

<!-- Hero.svelte -->    
let items = [
    title: "MyApp",
    css: {
        backgroundimage: 'linear-gradient(150deg,#cecece,#7e7e7e);'
    }
]

我这样做是为了第一次测试：

<!-- Hero.svelte -->
{#each items as item, i (item.title)}
<Heroitem title={item.title} 
          --background-image='linear-gradient(150deg,#cecece,#7e7e7e);'
/>
{/each}

最终想这样做：

<Heroitem title={item.title} 
    --background-image={item.css.backgroundimage}
/>

我正在使用 svelte-3.32.3

更新

似乎要传递给组件，您必须使用普通属性。

<!-- Heroitem.svelte -->
<script>
    ...
    export let css_backgroundimage
</script>

<div class="test" style="--background-image:{css_backgroundimage}">...</div>

<style>
    .test{
        background-image: var(--background-image}
    }
</style>


<!-- Hero.svelte -->
<Heroitem css_backgroundimage={item.css.backgroundimage} />

不确定这是否是正确的方法。

Answer 1

更新： 从 Svelte 3.38.0 开始，此功能已实现。

您现在可以直接传递 CSS 自定义属性，而无需公开单独的属性：

<!-- App.svelte -->
<Heroitem title={item.title} 
    --background-image={item.css.backgroundimage}
/>

<!-- Heroitem.svelte -->
<style>
    .blabla {
        background-image: var(--background-image, linear-gradient(150deg,#ffffff,#ab12b94f));
    }
</style>

上一个答案： 您链接的文档是一个 RFC，该功能尚未在 Svelte 中实现。请参阅此 issue 以跟踪功能的进度。

同时，您可以使用您描述的解决方法，将其作为道具传递并在组件中将其设置为 CSS 变量。

<!-- Heroitem.svelte -->
<script>
    ...
    export let css_backgroundimage
</script>

<div class="test" style="--background-image:{css_backgroundimage}">...</div>

<style>
    .test {
        background-image: var(--background-image}
    }
</style>


<!-- Hero.svelte -->
<Heroitem css_backgroundimage={item.css.backgroundimage} />

或者，您可以在组件外部的包装器元素中设置变量，它应该可以正常工作。

<!-- Heroitem.svelte -->
<div class="test">...</div>

<style>
    .test {
        background-image: var(--background-image}
    }
</style>


<!-- Hero.svelte -->
<div style="--background-image: {item.css.backgroundimage}">
    <Heroitem />
</div>

传递的 css 参数未在组件中使用

Passed css parameter is not used in component

html

svelte