CSS isolation for DataGrid

20 May 20254 minutes to read

CSS isolation allows defining component-specific styles by creating a .razor.css file that matches the name of the .razor file. This ensures that the styles apply only to the intended component without affecting other parts of the application. For example, to apply styles to an Index component, create a file named Index.razor.css in the same folder as Index.razor.

To enable CSS isolation for the Grid, it is recommended to wrap the SfGrid inside a standard HTML <div> element. This setup helps properly scope the styles when using the ::deep combinator, which is required to target nested child elements within the isolated styles.

Below is an example of implementing a simple Grid inside the Index.razor file:

Index.razor

@using Syncfusion.Blazor.Grids

<div>
    <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{
    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" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
            ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new 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
::deep .e-grid .e-altrow {
    background-color: violet;
}

Please find the sample in this GitHub location.

NOTE

You can get more information on CSS Isolation here.