.NET 5.0 Blazor bites - CSS isolation for Blazor components - part 2

Sridhar Narasimhan — Sat, 12 Sep 2020 16:45:41 +0000

In our previous blog, we have seen about basic CSS isolation.

https://dev.to/dharsha007/net-5-0-blazor-bites-css-isolation-for-blazor-components-2c33

Now, we are going to see a few more items in CSS isolation

SASS for CSS isolation
How to use CSS isolation with child components

In this blog, we are going to see the CSS isolation in the Blazor server application

First, you create a Blazor Server application. Since Blazor CSS isolation doesn’t offer support for CSS preprocessor. So we need to ensure the preprocessor compiles to the CSS file before Blazor build is done. We can use any tools like WebPack or library to do this process. Here I am going to choose Delegate.SassBuilder

Add this NuGet package reference to the project using the below code

<ItemGroup>
    <PackageReference Include="Delegate.SassBuilder" Version="1.4.0"></PackageReference>
  </ItemGroup>

Add the SCSS file to your project with the component.razor followed by SCSS file extension. Here we are going to add an SCSS file for index.razor and customize the H1 tag. Add Index.razor.scss and include the code below.

$primary-color: red;

h1 {
    color: $primary-color;
}

This will generate Index.razor.css when we build the project.
Note: CSS isolation is a build time step and so please ensure to rebuild whenever you change the CSS file

Rebuild and launch the application to see the Scoped styles applied to Blazor Index component H1 tag element.

Now we are going to make the CSS isolation work for child components without writing specific styles for child components. To make this happen we need to add ::deep to our CSS selector in our Index.razor.scss file.

$primary-color: red;

::deep h1 {
    color: $primary-color;
}

To check this we can add a Counter component in our Index.razor file where we have an H1 tag element. Once this is done rebuild and launch the application. It won’t work because the markup structured can’t be recognized by Blazor. To resolve this wrap the parent and child component within the **DIV* tag element.*

<div>
    @*Parent*@ 
        <h1>Hello, world!</h1>

        Welcome to your new app.
    @*Child*@ 
      <Counter></Counter>
</div>

Can we disable this CSS isolation in Blazor? Yes, we can but it will be available in any of the RC versions of .NET 5.0. Please refer the details below in brief

<PropertyGroup>
  <DisableScopedCssBundling>true</DisableScopedCssBundling>
</PropertyGroup>

https://github.com/dotnet/AspNetCore.Docs/issues/19360#issuecomment-691120629

I hope you enjoyed how Scoped CSS for Blazor child components can be achieved and use SASS for Blazor CSS isolation. I have attached the sample link https://github.com/Sridhar-Narasimhan/Blazor-css-isolation/tree/master/CSSIsolation for your reference

.NET 5.0 Blazor bites - CSS isolation for Blazor components

Sridhar Narasimhan — Sat, 12 Sep 2020 16:15:12 +0000

In this blog, we are going to walk through on how the CSS isolation for Blazor components can be done .NET 5.0 preview 8. Please join to check out the easy step by step process

Create a Blazor Webassembly application by enabling the ASP.NET core hosted option.

Add a new project (Razor class library) MyComponent to the solution.

In the created razor class library you will have styles.css in the wwwroot folder. You can delete it and create your component scoped CSS files by creating a new file next to your component with .css extension. Scoped styles are available under _framework/scoped.styles.css

Add MyComponent project reference to Blazor client application.
Create a razor component in Blazor client application Cssisolation.razor

@page "/cssisolation"
<h3>Cssisolation</h3>
<Component1>
</Component1>

Build your application and you can check in your browser dev tools to view your newly scoped CSS classes applied to your components. Your HTML elements will have strange identifiers.

I hope you understood how Scoped CSS for Blazor components can be achieved. I have attached the sample link https://github.com/Sridhar-Narasimhan/Blazor-css-isolation for your reference

DEV Community: Sridhar Narasimhan

.NET 5.0 Blazor bites - CSS isolation for Blazor components - part 2

.NET 5.0 Blazor bites - CSS isolation for Blazor components

In this blog, we are going to walk through on how the CSS isolation for Blazor components can be done .NET 5.0 preview 8. Please join to check out the easy step by step process