受欢迎的博客标签

ASP.NET Core Blazor - layouts (How to change .NET 5.0 .Net 6.x Blazor CSS)

Published

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

How To Use SCSS With Blazor

How to Using SASS with Blazor

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