如何在Svelte中使用JavaScript变量中的CSS样式？

Svelte的<style>块属于静态编译范畴，不支持直接插入JS变量（比如你尝试的{code}）——因为样式处理在构建阶段完成，无法解析运行时的变量值。要实现将JS变量中的CSS应用到元素，可通过动态创建样式元素的方式注入CSS：

具体实现步骤 #

1. 导入Svelte的onMount和onDestroy生命周期函数，用于组件挂载时注入样式、销毁时清理样式，避免内存泄漏。
2. 在onMount钩子中创建<style>元素，将JS变量里的CSS内容赋值给元素的textContent，再添加到页面<head>中。
3. 在onDestroy钩子中移除创建的样式元素。

修改后的完整组件代码：

<script>
    import CodeViewer from '$lib/CodeViewer.svelte';
    import { onMount, onDestroy } from 'svelte';

    const code = `       .ezy-rotate-180 {
            transition: 0.5s, color 0.1s;
            -webkit-transition: 0.5s, color 0.1s;
            -moz-transition: 0.5s, color 0.1s;
        }
        .ezy-rotate-180:hover {
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
        }`;
    const language = 'css';

    let styleElement;

    onMount(() => {
        styleElement = document.createElement('style');
        styleElement.textContent = code;
        document.head.appendChild(styleElement);
    });

    onDestroy(() => {
        styleElement?.remove();
    });
</script>

<div class="flex flex-row flex-wrap w-full">
    <div class="w-1/2">
        <!-- 1. added CSS class here
                 ↓   -->
        <div class="ezy-rotate-180 px-10 py-2 bg-slate-50 text-black w-28 text-center rounded-md">Rotate 180</div>
    </div>

    <CodeViewer {code} {language} />
</div>

修改后，JS变量中的CSS会被正确注入页面，目标div的旋转效果可正常生效，同时CodeViewer组件依然能正常展示代码。

内容的提问来源于stack exchange，提问作者Harinder Singh