面试题：Svelte组件间样式传递与共享策略

Question

假设存在多个Svelte组件，其中部分组件需要共享一些基础样式，同时每个组件又有其独特的样式。请阐述你会采用哪些策略来实现样式的传递与共享，并且说明如何在不破坏组件封装性的前提下做到这一点。

Answer 1

1. 使用CSS变量（自定义属性）

• 共享样式实现：在公共的CSS文件或者父组件的样式中定义CSS变量，例如：

:root {
  --primary-color: #007BFF;
  --font-family: Arial, sans-serif;
}

• 组件独特样式：每个组件可以基于这些变量定义自己的样式，同时也可以有自己独立的样式。例如：

<style>
  .my-component {
      color: var(--primary-color);
      font-family: var(--font-family);
      /* 组件独特样式 */
      background-color: lightgray;
    }
</style>
<div class="my-component">组件内容</div>

• 优点：不破坏组件封装性，通过变量的方式传递样式，组件内部可以灵活使用。

2. 引入公共CSS类

• 共享样式实现：创建一个公共的CSS文件，定义通用的样式类，例如：

.common-text {
  font-family: Arial, sans-serif;
  color: #333;
}

• 组件独特样式：在组件的样式中，既引入公共类，又定义自己的类。例如：

<style>
  .my-component {
      /* 组件独特样式 */
      background-color: lightblue;
    }
</style>
<div class="common-text my-component">组件内容</div>

• 优点：简单直接，容易理解和维护。缺点是如果类名管理不善，可能会导致命名冲突。

3. 使用Svelte的bind:this和CSS-in-JS库（如styled-components类似方案）

• 共享样式实现：在一个公共模块中定义共享样式函数，例如：

import { css } from 'lit-element';

export const sharedStyles = css`
  font-family: Arial, sans-serif;
  color: #333;
`;

• 组件独特样式：在组件中引入共享样式并结合自己的样式，例如：

<script>
  import { sharedStyles } from './shared-styles.js';
  import { css, html, LitElement } from 'lit-element';

  class MyComponent extends LitElement {
    static get styles() {
      return [
        sharedStyles,
        css`
          .my-component {
              background-color: lightgreen;
            }
        `
      ];
    }

    render() {
      return html`<div class="my-component">组件内容</div>`;
    }
  }
</script>

• 优点：样式和组件紧密结合，封装性好，同时能实现样式共享。缺点是需要引入额外的库，增加项目复杂度。