CSS isolation for Blazor DataGrid

5 Jun 20266 minutes to read

CSS isolation in Blazor enables defining component-specific styles by using a .razor.css file that matches the corresponding .razor component file. This approach ensures that styles are applied only to the intended component and do not affect other parts of the application. As a result, it helps prevent unintended side effects caused by global styling and makes it easier to manage styles in a controlled manner.

CSS isolation is particularly useful for maintaining clean and modular UI design in large-scale applications. When applications grow and include multiple components, managing global styles becomes challenging, often leading to conflicts and overrides. By isolating styles at the component level, each component maintains its own styling scope, improving maintainability and reducing the complexity of debugging UI issues.

For example, to apply styles to an Index component, create a file named Index.razor.css in the same directory as Index.razor. The styles defined in this file are automatically scoped to that component, preventing unintended styling conflicts. This file-based approach also improves organization by keeping component-specific styles alongside the component itself.

Why use CSS isolation with DataGrid

When working with the Syncfusion Blazor DataGrid (SfGrid), styling can become complex due to its rich structure and nested elements. The Grid includes multiple layers such as headers, rows, cells, and templates, each rendered with its own set of classes and DOM hierarchy. Applying global CSS in such scenarios may unintentionally affect other components or lead to styling conflicts across the application.

CSS isolation helps avoid these issues by restricting styles to a specific component. This ensures better maintainability and predictable styling behavior, especially when multiple Grid instances are used in different parts of the application. Developers can confidently apply styles knowing that they will not impact other components.

It also allows safe customization of the Grid’s appearance. For example, row colors, header styles, or cell formatting can be modified without worrying about breaking styles in other UI sections. This makes CSS isolation an effective approach for implementing consistent and controlled UI enhancements.

How CSS isolation works

The Syncfusion SfGrid renders multiple internal elements such as rows, headers, and cells. Since these elements are deeply nested within the component structure, applying styles through isolated CSS requires the use of the ::deep combinator.

The ::deep selector enables styles defined in a .razor.css file to penetrate the scoped boundary and target child elements generated by the Grid. Without using this selector, styles defined in isolated CSS would only apply to the top-level component and would not affect nested elements within the Grid.

To ensure proper application of isolated styles, wrap the SfGrid component inside a standard HTML element such as a div. Assigning a custom class to this wrapper helps scope the styles more effectively and provides better control when applying styles using the ::deep selector.

This setup ensures that styles are applied precisely where needed while still maintaining the benefits of CSS isolation. It also simplifies targeting specific Grid elements and avoids unintended style leakage across the application.

Applying CSS isolation to DataGrid

Below is an example demonstrating how to implement a simple DataGrid in Index.razor and apply isolated styles using Index.razor.css.

Index.razor

@using Syncfusion.Blazor.Grids

<div class="grid-host">
    <SfGrid DataSource="@Orders" AllowPaging="true">
        <GridColumns>
            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
            <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
            <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
        </GridColumns>
    </SfGrid>
</div>

@code{
    private static readonly Random random = new Random();
    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[random.Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
            ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[random.Next(5)]
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
        public string ShipCountry { get; set; }
    }
}

Index.razor.css
.grid-host ::deep .e-altrow {
    background-color: violet;
}

Notes

• Use a wrapper element (such as a div) to scope styles effectively.
• Use the ::deep combinator to target internal elements rendered by the Grid.
• Avoid global CSS when component-level customization is required.
• Ensure the .razor.css file name matches the corresponding .razor file.

CSS isolation provides a structured and maintainable way to customize the appearance of the Blazor DataGrid while preventing style conflicts across the application

Please find the sample in this GitHub location.

NOTE

More information on CSS Isolation is available here.