SVELTE/API DOCS
[SVELTE] STYLE
개 발자국
2021. 5. 21. 11:11
<style>
p {
/* this will only affect <p> elements in this component */
color: burlywood;
}
</style>
Svelte 파일 내부에 있는 style 태그는 해당 컴포넌트안에서만 유효범위를 가집니다.
이것은 Element
들에 컴포넌트에서 유효한 해쉬값을 붙인 클래스를 붙이는 것으로 가능합니다.
<style>
:global(body) {
/* this will apply to <body> */
margin: 0;
}
div :global(strong) {
/* this will apply to all <strong> elements, in any
component, that are inside <div> elements belonging
to this component */
color: goldenrod;
}
</style>
만약 해당 컴포넌트외에 전역적으로 style을 부여하고 싶다면 :global(selector)
를 사용하시면 됩니다.
<style>
@keyframes -global-my-animation-name {...}
</style>
만약 @keyframes
를 전역적으로 사용 하고 싶다면 -global-
을 사용하시면 됩니다. 위의 예제에서 my-animation-name이 사용되었지만 다른 이름으로 교체 하실 수 있습니다.
#svelte #style #keyframe
반응형