Blazor CSS 격리를 통해 스타일 상속을 수행하는 방법

당신은 Blazor CSS 격리에 익숙합니까?작년에 발표되었을 때, 나는wrote an introductory post과.빠른 입문을 원한다면, 이렇게 할 수 있습니다. Blazor CSS 격리는 스타일 범위를 특정 구성 요소로 확장할 수 있습니다.CSS 격리를 사용하면 구성 요소에 스타일을 포장할 수 있으며, 공급업체 스타일과 전역 CSS를 사용할 때 불가피한 번거로움을 걱정할 필요가 없습니다.
몇 개의 사용자 그룹에 대해 CSS 격리에 대해 말했듯이, 나는 항상 같은 문제에 부딪힌다. 어떻게 그것을 사용해서 구성 요소 사이에서 스타일을 계승합니까?잘 물었습니다.이 문장은 너에게 어떻게 하는지 알려줄 것이다.
상속 스타일을 말할 때, 나는 어떻게 official ASP.NET Core doc 상속 스타일을 가리키는 것이 아니다. 예를 들어, 구성 요소의 모든 하위 구성 요소가 같은 h1 스타일 성명을 가지기를 원할 때.나는 하나의 구성 요소 사이에서 하나의 기본 스타일을 공유하는 것을 가리킨다.CSS 격리 없이 수행할 수 있습니다.예를 들어 Bootstrap과 같은 라이브러리에서 대부분의 스타일을 정의하면 대부분의 스타일은 라이브러리에 의존하고 사용자 정의 스타일시트(예를 들어 custom.css가 생겨서 적당한 시기에 이 스타일시트를 덮어쓸 수 있다.
솔직히 Blazor CSS를 사용하여 격리하면 "C"(캐스케이드)는 존재하지 않습니다.여기는 레이어드가 없어요. 고립된 당신의 스타일은 레이어드의 뒷면입니다.Blazor CSS 격리를 통해 CSS 구성 요소 스타일의 범위를 결정할 수 있습니다.그리고 구축할 때 Blazor가 레벨링을 처리합니다.스타일을 계승하고 구성 요소 간에 공유하기를 원할 때, 역할 영역 CSS를 사용하는 많은 장점을 잃게 됩니다.
내가 보기에, 비슷한 구성 요소 사이에서 스타일을 공유하고 싶을 때, 계승과 CSS 격리를 결합시켜 사용하는 것이 가장 효과가 좋다.만약 해결 방안에 500개의 구성 요소가 있고 모든 구성 요소가 기본 스타일을 가지기를 원한다면, 당신은 자신에게 더 많은 문제를 가져올 수 있습니다.이런 상황에서 너는 반드시 기존의 공구를 꾸준히 사용해야 한다.
이러한 지식을 통해 Blazor CSS와 상속을 분리하여 사용하는 방법을 알아봅니다.

동일한 스타일을 서브어셈블리에 전달 CSS를 사용하여 상속 스타일 격리

나는 새로 만든 Blazor WebAssembly 프로그램을 사용하고 있다. (그것도 Blazor 서버에 적용된다.)Blazor를 사용한 적이 있다면, 그것은 Index, Counter, FetchData 구성 요소가 포함된 템플릿에서 나온 것입니다.애플리케이션을 생성하려면 dotnet CLI에서 명령을 실행하고 정상적으로 작동하는지 확인합니다.

dotnet new blazorwasm -o "CSSIsoInheritance"
cd blazorwasm
dotnet run

Pages 폴더에서 다음 파일을 만듭니다.

BaseComponent.razor

BaseComponent.razor.css

FetchData.razor.css

Counter.razor.css

BaseComponent.razor.css에서 저희는 귀하의 구성 요소에서 h1와 p 스타일을 공유할 것입니다.

h1 {
    color: red;
}

p {
    text-decoration-line: underline;
}

상속 키:범위 식별자

앞에서 말한 바와 같이 Blazor CSS 격리는 컴파일할 때 파일 기반 솔루션입니다.즉시 사용 가능하며 MyComponent.razor.css 파일과 일치하는 MyComponent.razor 파일을 찾습니다.컴파일할 때, 원소에 범위 식별자를 분배합니다.다음과 같이 할당됩니다(식별자가 다를 수 있음).

당신은 해결 방안이 계승의 유형을 이해하기를 기대할 수 없습니다.내가 반복해서 이렇게 말하는 것은 그것이 매우 중요하기 때문이다. Blazor CSS 격리는 파일 기반의 해결 방안이기 때문이다.계승을 실현하려면 영향을 받는 구성 요소에 사용자 정의 범위 식별자를 적용해야 합니다.프로젝트 파일에서 다음을 추가할 수 있습니다<ItemGroup>.

<ItemGroup>
    <None Update="Pages/BaseComponent.razor.css" CssScope="inherit-scope" />
    <None Update="Pages/Counter.razor.css" CssScope="inherit-scope" />
    <None Update="Pages/FetchData.razor.css" CssScope="inherit-scope" />
</ItemGroup>

일부 행을 저장하려면 와일드카드* 연산자를 사용하여 razor.css로 끝나는 파일을 포함할 수도 있습니다.

<ItemGroup>
    <None Update="Pages/*.razor.css" CssScope="inherit-scope" />
</ItemGroup>

Counter와 FetchData 구성 요소를 찾으면 이 스타일들이 적용된 것을 볼 수 있습니다.다음은 Counter 어셈블리의 모양새입니다.

개발자 도구를 열면 범위 식별자가 정확하게 적용되어 있음을 볼 수 있습니다.알고 싶으면 b-lib7l0qa43 표지부호는 MainLayout.razor 파일에 속합니다.

사용자 정의 범위 식별자를 Index 구성 요소에 적용하지 않았기 때문에 사용하지 않습니다.

솔루션의 단점

내가 앞서 말한 바와 같이, 너는 더욱 많은 두통을 가져오지 않도록 조심해야 한다.이 밖에도 솔루션은 다음과 같은 이유로 우아하지 않습니다.

모든 파생 구성 요소는 비어 있어도 razor.css 파일이 있어야 한다

우리의 예에서 (많은 경우) 기본 구성 요소 표시는 비어 있다

프로젝트 파일에 식별자를 명확하게 지정해야 합니다

.
즉시 사용할 수 있는 솔루션은 공유 스타일이 아닌 격리를 위한 것입니다.그러나, 만약 이것이 당신의 용례에 부합되고 당신에게 의미가 있다면, 당신은 그것을 사용하여 유지 보수 비용을 낮출 수 있습니다.

마무리

이 문서에서 상속과 CSS 격리를 어떻게 결합시켜 사용하는지 토론했다.우리는 상속과 그것의 장점과 단점을 어떻게 실현하는지 토론했다.평소와 마찬가지로 Blazor CSS 격리에 대한 자세한 내용은 리뷰에서 경험을 자유롭게 공유하고 아래 참조 자료를 참조하십시오.

(나)

Use CSS isolation in your Blazor projects(ASP.NET 핵심 문서)