我希望在一个模块中声明的样式应用于该模块的插槽元素(在另一个文件中填充)。
这是 Svelte REPL以下示例:
应用程序.html
<List>
{{#each items as item}}
<li><a>{{item}}</a></li>
{{/each}}
</List>
<script>
import List from './List.html'
export default {
components: {
List
}
}
</script>
列表.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>
数据:{
"items": ["Nope", "I'm good"]
}
红色不适用于 a
通过插槽添加的标签元素。我对 Svelte 很陌生,但我在网上找到了尽可能多的内容,但似乎找不到解决方案。任何帮助将不胜感激,谢谢。
最佳答案
这里的技巧是选择加入级联,使用 :global(...)
修饰符。在您的列表组件中:
<style>
ul :global(a) {
color: red;
}
</style>
这意味着'任何
a
该组件的 ul
的子元素元素,不管它们是否属于这个组件,都应该是红色的。
关于svelte - 如何将样式应用于 Svelte 中的插槽元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46086483/