将 CSS 自定义属性动态添加到 svelte 组件 3.38.0

问题描述

svelte 在 3.38.0 中添加了对将 CSS 自定义属性传递给组件的支持

这允许我们传递如下所示的 css 属性。

<Drawer --test1="red">

从技术上讲，它会在您的组件代码周围创建一个像这样的 div：

<div style="display: contents; --test: red;">

我想做的是传递多个而不必像 --test-1="X" --test-2="Z" 等那样定义它们

我想将它们放在一个对象中：

let test = {
    '--test-1': "X",'--test-2': "Z"
};

并让键用那里的值呈现。

问题是，有没有办法做到这一点？

以一种方式链接到 REPL 会很棒。

亲切的问候， 汤姆

解决方法

我认为目前不可能。这会很有用，所以你应该open a feature request。

同时，您可以使用自定义包装器组件自行解决此问题。请参阅this REPL（下面的相关代码）。

<!-- App.svelte -->
<script>
    import Example from './Example.svelte'; 
    import CustomPropWrapper from './CustomPropWrapper.svelte';
    
    const customProps = {
        '--first-color': 'red','--second-color': 'green'
    }
</script>

<!-- longhand way -->
<Example --first-color={firstColor} --second-color={secondColor}></Example>

<!-- pass as an object using a wrapper -->
<CustomPropWrapper {customProps}>
    <Example />
</CustomPropWrapper>

<!-- CustomPropWrapper.svelte -->
<script>
    export let customProps = {};
    
    // create an inline style string
    $: style = Object.entries(customProps).reduce((acc,[key,value]) => `${acc}; ${key}: ${value}`,'');
</script>

<div {style}>
    <slot />
</div>

<style>
    div {
        display: contents;
    }
</style>

<!-- Example.svelte -->
<p class="first">
    I'm the first paragraph
</p>
<p class="second">
    I'm the second paragraph
</p>

<style>
    .first {
        color: var(--first-color);
    }
    
    .second {
        color: var(--second-color);
    }
</style>