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>
关于javascript - 将 CSS 自定义属性动态添加到 svelte 组件 3.38.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67408851/