備忘録。

事象

コンポーネント化されたプロジェクト内の共通部品を使用する際、自身が作成している画面に子コンポーネントとしてそのまま取り入れようとすると見た目に統一性がなくなってしまう為、一部のスタイルは変更したい。（フォントサイズを小さくしたい等）
しかし、プロジェクトのルール等の都合によって直接子コンポーネントのCSSを編集することは禁止されている…

対処

親コンポーネント（自身が作成している画面）のCSSにて::deepを付与することにより、子や孫のコンポーネントにも親と同様のスタイルが適用される。

Parent.css(親コンポーネントのCSS)

::deep h3 { 
    font-size: 12px;
}

参考

https://learn.microsoft.com/ja-jp/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0#child-component-support