問題

以下のように .razor.cssファイルにスタイルを記述したところ、CSSが反映されない問題が発生。

Contact.razor.css

.contact-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

Contact.razor

@page "/contact"
<h3>お問い合わせ一覧</h3>
<table class="contact-table">
    <tr>
        <th>質問</th>
        <th>回答</th>
    </tr>
</table>

にっしー

解決方法

.razor.css ファイル内に body {} の空セレクタを追加するだけで解決！！

Contact.razor.css

body {
}

.contact-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

にっしー

なぜ "body {}" が必要なのか？

BlazorのCSSは、HTMLの一番上にある要素（例えば body や html）を基準にして処理される。
もしCSSファイルに 基準となるセレクタ が何もない場合、BlazorがそのCSSを正しく処理できないことがある。
bodyを追加するだけで、BlazorはこのCSSを有効なものとして認識し、スタイルが正しく反映されるようになる。

にっしー

それでも反映されない場合

ブラウザが古いCSSをキャッシュしている可能性があります。
実行したら「Ctrl+Shift+R」でスーパーリロードを行ってみてください。
キャッシュがクリアされて最新のCSSが反映されるようになります。