使用 Svelte，如何使用 Javascript 字符串变量填充 <svelte:head> 中的 <style> 标记？

Question

使用 Svelte，我想要完成的是能够使用我拥有的 post 对象的 css 属性来设置我的 html 的样式。

我想，没问题，只需将样式标签添加到我的 svelte:head 和 {post.css}。它会将我的 post.css 数据直接放到样式标签中，中提琴，问题解决了。但是，不，问题没有解决。当我在浏览器中查看该元素时，我看到

<style>{post.css}</style>

而不是

<style>
  p{
    color: purple;
    font-weight: 900;
  }
 </style>

我创建了一个解决方法，我在 onMount 之后设置 <style> 标记的 innerText，但我不喜欢它，并且更愿意这样做一种更清洁的方式。

我想要的……

<script>
  export let post = {
    html: `<p>This is purple</p>`,
    css : `
      p{
        color: purple;
        font-weight: 900;
      }
    `
    }  
</script>

<svelte:head>
  <style>{post.css}</style>
</svelte:head>

{@html post.html}

我必须做些什么才能让它发挥作用……

<script>
  import { onMount } from "svelte";

  export let post = {
    html: `<p>This is purple</p>`,
    css : `
      p{
        color: purple;
        font-weight: 900;
      }
    `
    }

  onMount(() => {
    let styler = document.getElementById("styler");
    styler.innerText = post.css
  });
</script>

<svelte:head>
  <style id="styler"></style>
</svelte:head>

{@html post.html}

如果您有任何其他替代方法来使用 css 属性来设置 post 对象的 html 属性的样式，或者知道如何让 Svelte 识别 <style> 标签中的 {post.css}，请告诉我。

Answer 1

你可以这样做：

{@html `<style>${post.css}</style>`}

请记住，post.css 中的样式将应用于整个页面，而不仅仅是 post 的 HTML。

Demo

使用 Svelte，如何使用 Javascript 字符串变量填充 <svelte:head> 中的 <style> 标记？

Using Svelte, how do I populate a <style> tag in <svelte:head> with a Javascript string variable?

svelte

css-in-js

sapper