Svelte使用each渲染组件时子元素CSS选择器提示未使用如何解决

Svelte 默认对组件内<style>标签做样式隔离，通过给当前组件的原生DOM元素添加唯一data属性实现规则匹配，编译器只会扫描当前组件内直接声明的原生DOM节点，不会深入子组件内部识别结构。
你代码中.users容器下直接放置的是<User>自定义组件，不属于当前组件的原生DOM元素，不会被添加当前组件的隔离data属性，因此编译器无法识别.users > *对应的匹配节点，会抛出未使用选择器的报错，同时该样式默认也无法命中子组件内部的元素。

方法1（推荐，最简单）：使用:global()修饰符 #

用:global()标记子选择器，跳过样式隔离校验，即可让规则生效同时消除报错：

<style>
    .users > :global(*) {
        margin-right: 5px;
    }
</style>

方法2：透传class属性给子组件 #

如果不想使用全局样式修饰符，可以通过透传class的方式实现：

1. 在User组件内部接收class属性，绑定到根元素：

<!-- User 组件 -->
<script>
    let className = ''
    export { className as class }
</script>
<div class={className}>
    <!-- User组件内部内容 -->
</div>

2. 父组件内给子元素添加类名后直接写样式：

<div class="users">
    {#each [1,2,3,4,5] as id}
        <User class="user-item" name={id} />
    {/each}
</div>

<style>
    .user-item {
        margin-right: 5px;
    }
</style>

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