【Blazor】コンポーネントにのみCSSを適用する方法

更新日：2023/07/26

特定のコンポーネントのみにCSSを割り当てたい場合の対処方法について解説します。

CSS分離とは？
CSS分離を使うための準備
CSS分離を行うためのファイル準備
コンポーネントにCSSを割り当てる
実行と確認

CSS分離とは？

CSS分離は.NET5から利用できる特定のコンポーネントのみにCSSを割り当てるようにする機能です。これを使うことで、他のコンポーネントやライブラリとの競合を防ぐことができます。

CSS分離を使うための準備

CSS分離を行うためには、以下のリンクを読み込む必要があります。場合によっては、プロジェクトを作成した際に既に書かれている場合もあります。


<html>
<head>
  ...
  @* 以下のCSS読み込む必要がある *@
  <link href="{プロジェクト名}.styles.css" rel="stylesheet" />
  ...

CSS分離を行うためのファイル準備

まず、CSSを割り当てるためのコンポーネントを作成します。今回はCssIsolationComponent.razorという名前で作成します。

このコンポーネントに割り当てるCSSを作成していきます。同じフォルダの階層内にCSSを作成します。その際に、CSS名は、[コンポーネント名＋.css]という風に命名します。 そうすると、自動的にコンポーネントの傘下に入ります

コンポーネントにCSSを割り当てる

CssIsolationComponent.razorの内容を以下のように修正します。


<p>CssIsolationComponent</p>

CssIsolationComponent.razor.cssの内容を以下のように修正します。 pタグの背景色が赤になるようにしています。


p{
    background-color:red;
}

修正が終わったら、プロジェクトに既存で存在するCounter.razor内で、このコンポーネントを使用していきましょう。


@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<Blazor_CssIsolation.Components.CssIsolationComponent />

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}