我可以使用传递给组件的变量设置苗条样式的 css 属性值吗

Posted 2023-02-19

【中文标题】我可以使用传递给组件的变量设置苗条样式的 css 属性值吗

【英文标题】：Can I set svelte style css attribute values using variables passed in to a component

【发布时间】：2019-12-02 02:28:30

【问题描述】：

我想创建一个接收图像名称和路径的苗条组件。我想让组件使用 CSS 将图像设置为“背景图像”。

我尝试了以下似乎不起作用...

App.svelte中调用的组件：

<Image image_url='./images/image1.jpg' />

Image.Svelte

<script>
export let image_url;
</script>

<style>
.image
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url(image_url);
    min-height: 100%;

</style>

<div class="image">
  <p>some text</p>
</div>

当我检查组件时，背景图像的 css 是：

background-image: url(image_url);

是否可以在 CSS 中转换变量？

【参考方案1】：

没有。组件样式在组件的 所有 实例之间共享，因为它们被静态提取到 .css 文件中，或者因为它们被注入到所有组件引用的单个 <style> 元素中。如果可以将变量直接放在组件的 <style> 中，则意味着 Svelte 需要创建封装样式per-instance，这将不利于性能并且会消耗更多内存.

有两种方法可以解决这个问题。第一个是对任何可以改变每个实例的东西使用内联样式：

<script>
export let image_url;
</script>

<style>
.image
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* background-image: url(image_url); */
    min-height: 100%;

</style>

<!-- <div class="image"> -->
<div class="image" style="background-image: url(image_url);">
  <p>some text</p>
</div>

第二个，特别是如果你需要在多个地方使用值，是使用 CSS 变量：

<script>
export let image_url;
</script>

<style>
.image
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* background-image: url(image_url); */
    background-image: var(--image);
    min-height: 100%;

</style>

<!-- <div class="image"> -->
<div class="image" style="--image: url(image_url);">
  <p>some text</p>
</div>

【讨论】：

...或 3. 使用“与框架无关的 css-in-js 解决方案”作为核心团队 suggests。它更加灵活，因为内联样式不处理媒体查询、伪类和伪元素。

顺便说一句，我是 Svelte 的创建者，我写了那篇文章 ;) CSS-in-JS 有它的用途，但我通常不建议使用它来解决这个特殊问题，它可能是矫枉过正

【参考方案2】：

您现在可以直接将 css 变量作为 props 传递：https://svelte.dev/docs#template-syntax-component-directives---style-props

<Image --background-image='url(./images/image1.jpg)' />

在 Image.svelte

中

    background-image: var(--background-image, url(./images/default.jpg));

【参考方案3】：

将 Svelte 块视为 CSS 黑盒。您不能像在浏览器的 css 文件中使用它们一样使用 javascript 变量。

但是...由于它是一个 CSS 框，您始终可以使用 scss 并使用像 this one 这样的细长预处理器来编译您的块。然后你就可以做

<script>
export let image_url;
</script>

<style lang="scss">
@import "my/path/to/variables";

.image
    position:relative;
    opacity: 0.70;
    background-position:bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url(#$image_url);
    min-height: 100%;

</style>

<div class="image">
  <p>some text</p>
</div>