Svelte에서는 컴포넌트의 스타일을 다양한 방법으로 지정할 수 있습니다. 가장 기본적인 방법은 컴포넌트 파일 내부에 <style> 태그를 사용하는 것입니다. 다음은 예시입니다:

<script>
  export let name;
</script>

<style>
  .container {
    background-color: lightblue;
    padding: 10px;
  }

  h1 {
    color: red;
  }
</style>

<div class="container">
  <h1>Hello {name}!</h1>
</div>

위의 예시에서는 .container라는 클래스와 h1 태그에 대한 스타일을 정의하고 있습니다. 이 스타일들은 해당 컴포넌트 내에서만 적용됩니다.

또한, Svelte에서는 스타일을 외부 스타일 시트로 작성하여 가져오는 기능도 제공합니다. 이렇게 하면 여러 컴포넌트에서 동일한 스타일을 사용할 수 있습니다. 다음은 예시입니다:

// styles.css

.container {
  background-color: lightblue;
  padding: 10px;
}

h1 {
  color: red;
}

<script>
  export let name;
</script>

<style src="./styles.css"></style>

<div class="container">
  <h1>Hello {name}!</h1>
</div>

위의 예시에서는 styles.css 파일에 스타일을 작성하고, 컴포넌트에 <style src="./styles.css"></style>를 사용하여 외부 스타일 시트를 가져오고 있습니다.

이러한 방법들을 사용하여 Svelte 컴포넌트를 스타일링할 수 있습니다. 필요에 따라 내부 스타일 또는 외부 스타일 시트를 사용하면 됩니다.