小编ill*_*der的帖子

如何在Svelte中将样式应用于插槽元素?

我希望将在一个模块中声明的样式应用于该模块的slot元素(这些元素将填充到另一个文件中)。

这是以下示例的Svelte REPL

App.html

<List>
    {{#each items as item}}
        <li><a>{{item}}</a></li>
    {{/each}}
</List>

<script>
    import List from './List.html'

    export default {
        components: {
            List
        }
    }
</script>
Run Code Online (Sandbox Code Playgroud)

List.html:

<h1>A Special List</h1>
<ul>
    <li><a>Let's all be red!</a></li>
    <slot></slot>
</ul>

<style>
    ul a {
        color: red;
    }
</style>
Run Code Online (Sandbox Code Playgroud)

数据:

{
    "items": ["Nope", "I'm good"]
}
Run Code Online (Sandbox Code Playgroud)

红色不适用于a通过插槽添加的标签元素。

我是Svelte的新手,但是我在网上找到了尽可能多的内容,而且似乎也找不到解决方案。任何帮助,将不胜感激,谢谢。

svelte

4
推荐指数
1
解决办法
805
查看次数

标签 统计

svelte ×1