1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[Blazor]子コンポーネントのCSSに手を加えずに親コンポーネントのスタイルを適用させる

Last updated at Posted at 2022-11-07

備忘録。

事象

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

対処

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

Parent.css(親コンポーネントのCSS)
::deep h3 { 
    font-size: 12px;
}

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?