面试题：Svelte中如何实现组件内局部样式隔离及与全局样式的交互

Question

在Svelte项目里，组件样式默认是局部作用域的。请阐述在一个Svelte组件中，怎样定义局部样式以确保与其他组件样式不冲突？同时，如果想复用部分全局样式，又该如何操作？请结合代码示例说明。

Answer 1

定义局部样式

在Svelte组件中，直接在<style>标签内编写样式，这些样式默认就是局部作用域，仅对当前组件生效，不会与其他组件样式冲突。例如：

<script>
    let name = 'World';
</script>

<style>
    h1 {
        color: blue;
    }
</style>

<h1>Hello, {name}!</h1>

上述代码中<style>标签内定义的h1样式仅应用于当前组件内的h1元素，不会影响其他组件中的h1。

复用全局样式

1. 方式一：引入外部CSS文件
   • 首先在项目中创建一个全局CSS文件，比如global.css：

/* global.css */
.global - text - color {
    color: green;
}

- 然后在Svelte组件中引入该文件：

<script>
    import '../global.css';
</script>

<p class="global - text - color">This text has global style.</p>

2. 方式二：使用:global伪类
   • 在组件的<style>标签内，使用:global伪类来定义全局作用域的样式，可复用部分样式。例如：

<style>
    :global(.global - bg - color) {
        background - color: yellow;
    }
</style>

<div class="global - bg - color">This div has a global - like background color.</div>

这里.global - bg - color类的样式虽然在组件的<style>中定义，但使用:global使其具有类似全局样式的效果，可在其他地方复用。