How do I apply custom CSS style to a Blazor component?

To apply custom CSS style to a Blazor component, create a custom CSS file in your Razor page with the name of razorpage.css (i.e. Index.razor.css) and add your styles.

[Index.razor.css]

h1 {
        color: red;
        font-style: italic;
        text-shadow: 2px 2px 2px gray;
    }

You can also define the custom CSS styles in the <style> section of Razor pages.

[Index.razor]

@page "/"

<h1>Blazor App</h1>

<style>
h1 {
        color: red;
        font-style: italic;
        text-shadow: 2px 2px 2px gray;
    }
</style>