Blazor コンポーネントで分離 CSS を使用する
Blazor を使用するときに常に気になることの 1 つは、コンポーネント間で誤ってスタイルを壊すことが非常に簡単であるということでした。あるコンポーネントにクラスを追加すると、まったく別のページにある別のものが突然表示されなくなってしまいます。 Blazor には、これに対する CSS 分離というソリューションが組み込まれていることがわかりました。
CSS 分離とは何ですか?
CSS を分離すると、スタイルの範囲を特定のコンポーネントに限定できます。 Blazor は、ビルド時にコンポーネントごとに一意の属性を生成し、それを CSS セレクターに追加することでこれを実現します。したがって、スタイルは、そのスタイルが属するコンポーネントにのみ適用されます。
BEM の命名や、特異性に関するクレイジーなハックは必要ありません。クリーンでスコープ指定された CSS だけです。
使い方
Card.razor というコンポーネントがあるとします。
<div class="card">
<h3 class="card-title">@Title</h3>
<p class="card-body">@ChildContent</p>
</div>
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
}
分離スタイルを追加するには、同じ名前で拡張子が .razor.css のファイルを作成するだけです。この場合: Card.razor.css。
.card {
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 1rem;
background: var(--color-bg-secondary);
}
.card-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.card-body {
color: var(--color-text-secondary);
font-size: 0.9rem;
}
それで終わりです！ Blazor は自動的にそれを選択し、それらのスタイルのスコープを Card コンポーネントのみに限定します。別の場所に別の .card クラスがある場合、それは影響を受けません。
内部での仕組み
プロジェクトをビルドすると、Blazor によって HTML と CSS が書き換えられます。コンポーネントは b-3x8qz7k2f1 のような一意の属性を取得し、CSS セレクターはその属性を追加します。
.card[b-3x8qz7k2f1] {
border: 1px solid var(--color-border);
/* ... */
}
生成された CSS バンドルは {ProjectName}.styles.css として提供されます。 index.html または _Host.cshtml にこれがあることを確認してください:
<link href="YourApp.styles.css" rel="stylesheet" />
このリンクが見つからないと、個別のスタイルが表示されず、何が起こっているのか疑問に思って 30 分を費やすことになります。信じてください、私はそこに行ったことがあります。
子要素をターゲットにする
留意すべき点の 1 つは、デフォルトでは、分離 CSS は現在のコンポーネントの要素にのみ適用されるということです。子コンポーネント内の要素のスタイルを設定したい場合は、 ::deep コンビネータが必要です。
::deep .child-element {
color: red;
}
これにより、Blazor は子コンポーネント内の一致する要素にもスタイルを適用するように指示されます。子をスタイルする必要があるラッパー コンポーネントがある場合に非常に便利です。
#いつ使用するか
私は現在、ほぼすべてのコンポーネントに CSS 分離を使用しています。物事をクリーンかつ予測可能な状態に保ちます。私がこれを使用しないのは、リセット、タイポグラフィー、テーマ変数などの真にグローバルなスタイルの場合だけです。これらは共有 CSS ファイルに入れられます。
投稿が気に入っていただければ幸いです!ソーシャルメディアで**@emimontesdeoca**までお気軽にご連絡ください。