CSS Classes

Nov 25, 2020
2 minutes to read

This topic describes how to apply custom CSS classes to DevExpress Blazor components.

Note

You can also use themes to change your application’s appearance.

Add a CSS File to a Project

Copy a CSS file with your styles to the wwwroot/css folder.
Add the CSS file link to the head section of the layout file:
- Pages/_Host.cshtml in Blazor Server apps.
- wwwroot/index.html in Blazor WebAssembly apps.
```
<head>
    ...
    <link href="css/my-styles.css" rel="stylesheet" />
</head>    
```

Note

You can also define styles in the <style> section of a Razor page:

<style>
   .my-style {
       width: 400px;
       color: white;
       background-color: mediumpurple;
   }
</style>

Apply Styles to Components

You can apply CSS styles to Blazor components and their elements. All objects inherited from DxComponentBase implement the CssClass property. The following code applies a CSS class to a Pager:

Razor
CSS

<DxPager PageCount="10"
         ActivePageIndex="2"
         CssClass="my-pager">
</DxPager>

.my-pager {
    font-weight: 700;
}

Default Style (font-weight: 400)

Pager Font Weight 400

Custom Style (font-weight: 700)

Pager Font Weight 700

Other classes can also have a CssClass or *CssClass property, for example, DxChartAxisLabel.CssClass, DxDataGridBase.DataRowCssClass. The code below applies a CSS class to a toolbar item (the DxToolbarItemBase.CssClass property).

Razor
CSS

<DxToolbar>
    <DxToolbarItem CssClass="my-toolbar-item" Text="Insert"></DxToolbarItem>
    <DxToolbarItem Text="Edit"></DxToolbarItem>
    <DxToolbarItem Text="Delete"></DxToolbarItem>
</DxToolbar>

.my-toolbar-item {
    background-color: mediumpurple;
    border-color: mediumpurple;
}

Toolbar Item CSS Class

Icon CSS Classes

Your CSS file can contain styles for icons used within components. To apply these styles, use the IconCssClass property. The code below assigns icons to Context Menu items.

Razor
CSS

<DxContextMenu>
    <Items>
        <DxContextMenuItem Text="Home" IconCssClass="icon icon-home"></DxContextMenuItem>
        <DxContextMenuItem Text="Contacts" IconCssClass="icon icon-phone"></DxContextMenuItem>
        <DxContextMenuItem Text="Calendar" IconCssClass="icon icon-calendar"></DxContextMenuItem>
    </Items>
</DxContextMenu>

.icon {
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    height: 16px;
    width: 16px;
}

.icon-home {
    -webkit-mask-image: url("../images/Home.svg");
    mask-image: url("../images/Home.svg");
}

.icon-phone {
    -webkit-mask-image: url("../images/Phone.svg");
    mask-image: url("../images/Phone.svg");
}

.icon-calendar {
    -webkit-mask-image: url("../images/Calendar.svg");
    mask-image: url("../images/Calendar.svg");
}

Refer to Icons for more information.

Apply Styles to Inner HTML Elements

DevExpress Blazor components consist of standard HTML elements (div, table, input,td, etc.). You can apply CSS styles to these elements. Refer to the following articles for more information:

The code below hides horizontal lines in the Data Grid:

Razor
CSS

<DxDataGrid Data="@DataSource" CssClass="my-grid">
    ...
</DxDataGrid>

.my-grid table tr:not(:first-child) > td {
    border-top: none;
}
.my-grid table tr:not(:last-child) > td {
    border-bottom: none;
}

Default Style

Grid - Default Configuration

Custom Style (horizontal lines are hidden)

Grid Without Horizontal Lines

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Add a CSS File to a Project

Apply Styles to Components

Icon CSS Classes

Apply Styles to Inner HTML Elements