如何在Svelte中定义依赖全局属性的scoped CSS类

问题原因 #

你将全局属性选择器的整个规则块包裹在了:global()中，会导致块内所有子选择器默认继承全局属性，不会带上当前组件的scoped唯一标识，因此.title会全局生效。

解决方案 #

仅将全局的html属性选择器部分标记为全局，给.title保留组件局部作用域即可，正确写法如下：

<style lang="less" scoped>
/* 写法1：仅包裹全局选择器部分 */
:global(html[data-theme='light']) .title {
  color: black;
}
:global(html[data-theme='dark']) .title {
  color: white;
}

/* 写法2：嵌套写法下给局部类显式加:local标记 */
:global(html[data-theme='light']) {
  & :local(.title) {
    color: black;
  }
}
:global(html[data-theme='dark']) {
  & :local(.title) {
    color: white;
  }
}
</style>

以上写法编译后，.title会自动带上当前组件的唯一作用域标识，仅会作用于当前组件内使用.title类的元素，不会污染全局样式。

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