Question

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

我认为，没问题，只需使用svelte:head向我的{post.css}添加样式标签即可。它将我的post.css数据直接放到样式标签中，问题解决了。但是，不，问题没有解决。在浏览器中查看元素时，会看到

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

代替

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

我创建了一个变通方法，在innerText之后设置<style>标签的onMount，但是我不喜欢它，并且希望做得更干净。方式。

我想要什么...

<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属性为html对象的post属性设置样式，或者知道如何让Svelte在其中识别{post.css} <style>标签，请让我知道。

Answer 1

您可以这样做：

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

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

Demo

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

1 个答案: