Svelte 빠른 팁: 스타일 소품 기본값

Svelte에는 style props을 사용하는 구성 요소 테마용 내장 솔루션이 있습니다. 따라서 구성 요소 스타일에서 CSS custom properties을 사용할 수 있습니다...

<p>
    I have something important to say.
</p>

<style>
    p {
        border: 2px solid var(--line-color);

        /* Decorative styles */
        padding: 1rem;
        max-width: 60ch;
    }

</style>

...스타일 소품을 사용하여 구성 요소 외부에서 쉽게 설정할 수 있습니다.

<TextBox --line-color="mediumspringgreen"></TextBox>

하지만 스타일에 기본값을 지정하려면 어떻게 해야 할까요? 사용자 정의 속성var 구문은 속성이 정의되지 않은 경우 대체를 설정하는 second argument을 사용합니다. 따라서 기본 테두리 색상을 darkred 로 지정하려면 다음을 수행할 수 있습니다.

p {
  border: 2px solid var(--line-color, darkred);
}

그러나 동일한 폴백으로 여러 위치에서 --line-color를 사용하려는 경우 장황해질 수 있습니다. 기본값을 업데이트하려면 여러 곳에서 업데이트해야 합니다!

p {
  border: 2px solid var(--line-color, darkred);
  text-decoration: underline wavy var(--line-color, darkred) 1px;
}

덜 장황하게 만들기 위해 이것을 리팩터링하는 두 가지 방법이 있습니다. 먼저 기본값에 대해 다른 사용자 지정 속성을 도입할 수 있습니다.

p {
  --line-color-default: darkred;
  border: 2px solid var(--line-color, var(--line-color-default));
  text-decoration: underline wavy var(--line-color, var(--line-color-default)) 1px;
}

이렇게 하면 기본값을 변경할 수 있는 한 곳이 있지만 var 를 참조할 때마다 여전히 --line-color 에 대한 두 번째 인수를 제공해야 합니다.

대신 내가 권장하는 접근 방식은 선 색상 또는 대체 색상을 나타내는 다른 사용자 지정 속성을 도입하는 것입니다.

p {
  --_line-color: var(--line-color, darkred);

  border: 2px solid var(--_line-color);
  text-decoration: underline wavy var(--_line-color) 1px;
}

이제 두 가지 변수가 있습니다.

--line-color는 사용자 제공 테마 값

입니다.

--_line-color는 스타일에서 사용하는 것이며 사용자 제공 값(정의된 경우) 또는 기본 색상

입니다.

이Svelte REPL에서 실제로 작동하는 것을 볼 수 있습니다.

테마 변수를 여러 위치에서 사용할 계획인 경우 --_line-color와 같은 변수를 도입하기만 하면 됩니다. 그렇지 않으면 첫 번째 예에서와 같이 속성을 사용하는 폴백을 설정하는 것이 좋습니다.

여기에 표시된 기술은 Svelte에 고유하지 않으며 사용자 지정 속성을 사용하는 모든 곳에 적용할 수 있습니다. 그러나 사용자 지정 속성은 구성 요소를 테마로 지정하는 데 권장되는 방법이므로 Svelte에서 특히 중요합니다.