In this post, I will describe how to change .NET 5.0 .Net 6.x Blazor CSS.
How to customize the font size and color in Blazor components
Solution Folder
BlazorServer
├───\Pages
│ └───_Host.razor <---page
├───\Shared
│ └───Shared/MainLayout.razor <---page
│ └───Shared/MainLayout.razor.css <---css for page
│ └───Shared/NavMenu.razor
│ └───Shared/NavMenu.css
├───App.razor
Asp .Net core Blazor server 5.x project structure
_Host.razor<--App.razor<--MainLayout.Razor<--(NavMenu.Razor(left sidebar),other Component.Razor(like index.Razor)
ASP.NET Core Blazor 5.x 6.x layouts
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-6.0
https://docs.microsoft.com/en-us/aspnet/core/blazor/layouts?view=aspnetcore-5.0
_Host.razor
┌───────────┴───────────┐
{ <component type="typeof(App)" render-mode="ServerPrerendered" />}
│
App.razor
┌──────────┴──────────┐
{<LayoutView Layout="@typeof(MainLayout)">}
│
MainLayout.Razor
┌──────────┴──────────┐
siderbar @body
│ |
{NavMenu.Razor } { Index.Razor etc.}
src/BlazorServer/Stockso.BlazorServer/Shared/MainLayout.razor.css
.sidebar {
-width: 250px
+width: 350px; /*old width: 250px;*/
- height: 100vh;
+height: 150vh; /* height: 100vh;*/
position: sticky;
top: 0;
}
src/BlazorServer/Stockso.BlazorServer/Shared/NavMenu.razor.css
.nav-item ::deep a {
color: #d7d7d7;
border-radius: 4px;
-height: 3rem;
+height: 1.5rem;
display: flex;
align-items: center;
line-height: 3rem;
In Blazor, there are three ways to use different CSS files in different pages
1. Use inline <style></style> tag to define the custom styling for the page.
2. Include a new CSS file in the page by using a JavaScript interop in the OnInitialized method.
As far as I know, right now, Blazor does not offer a built-in way to handle CSS, and Blazor best practices and patterns are not yet available, so you can handle CSS in whatever manner you found fit, including JSInterop.
[script.js]
function includeCss() {
var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "css/external.css");//location of the css that we want include for the page
document.getElementsByTagName("head")[0].appendChild(element);
}
[index.razor]
@page “/”
<h1>Blazor Application</h1>
@code{
protected override async void OnInitialized()
{
await JSRuntime.InvokeAsync<object>("includeCss");
}
}
3. Usedirect links of the CSS file via the <link> HTML element with its local or online reference in the href attribute.
<link href="StyleSheet.css" rel="stylesheet" />
.NET 5.0 Blazor bites - CSS isolation for Blazor components - part 2
https://dev.to/dharsha007/net-5-0-blazor-bites-css-isolation-for-blazor-components-part-2-2d6j
In Blazor, there are three ways to use different CSS files in different pages
Style your Blazor components with SCSS and Web Compiler
How to customize default CSS setup in Blazor(Blazor and CSS Frameworks)
https://www.codeproject.com/Articles/5289921/Blazor-and-CSS-Frameworks