CSS Classes
- 4 minutes to read
This topic describes how to apply custom CSS classes to DevExpress Blazor components.
Add CSS Rules to a Project
You can attach a .css file to your project. To do this, copy a stylesheet file to the wwwroot/css folder and add the file link to the head section of the layout file:
- Pages/_Layout.cshtml for Blazor Server applications created with a Microsoft template in .NET 6
- Pages/_Host.cshtml for Blazor Server applications created with a DevExpress Template in .NET 6 and .NET 7 or with a Microsoft template in .NET 7
- wwwroot/index.html for Blazor WebAssembly or Hybrid applications in .NET 6 and .NET 7
- Components/App.razor for Blazor Web applications in .NET 8 and .NET 9
<head>
<link href="css/my-styles.css" rel="stylesheet" />
</head>
You can also define styles in .razor.css files. Refer to the following topic for more information and specifics: CSS Isolation.
Alternatively, you can specify CSS rules in the <style> section of a .razor file:
<style>
.my-style {
width: 400px;
color: white;
background-color: mediumpurple;
}
</style>
Apply Styles to Components
DevExpress components implement CssClass and *CssClass properties that allow you to assign CSS classes to the component and its elements. For instance, you can apply your custom style to a TreeView as follows:
.my-style {
color: orange;
}
<DxTreeView CssClass="my-style">
<Nodes>...</Nodes>
</DxTreeView>
Why Your Custom Style Can Be Ignored
DevExpress controls include predefined CSS styles applied to its elements. If your CSS property declaration is ignored, most likely there is another predefined or custom rule that has higher priority. Examine CSS rules with browser developer tools and make your rule more specific to override predefined CSS styles.
The following code sample assigns the my-style CSS class to the form layout item caption.
<DxFormLayout >
<DxFormLayoutItem Caption="Location:" CaptionCssClass="my-style">
<DxTextBox Text="London" />
</DxFormLayoutItem>
</DxFormLayout>
The assigned rule includes 3 property declarations, but only the font-style property value is applied.
.my-style {
font-weight: 600;
color: orange;
font-style: italic;
}
The following image shows rules applied to the caption (in browser developer tools). font-weight and color properties are specified in two conflicting rules. Since the predefined rule has two class selectors – .dxbl-fl and .dxbl-fl-cpt, it has higher priority than the my-style rule that has only one class selector.
Make your rule more specific. For instance, add a CSS class to the component and add the class selector to the CSS rule.
.my-fl-style .my-style {
font-weight: 600;
color: orange;
font-style: italic;
}
<DxFormLayout CssClass="my-fl-style">
<DxFormLayoutItem Caption="Location:" CaptionCssClass="my-style">
<DxTextBox Text="London" />
</DxFormLayoutItem>
</DxFormLayout>
For more information about how a browser calculates rule priority, refer to the following topic: Understanding the cascade.
Note
You can override predefined classes to change the default appearance of elements. However, note that this solution uses a non-public API, which can be modified in future versions without notification.
.dxbl-fl .dxbl-fl-cpt { font-weight: 600; color: orange; font-style: italic; }You can use the !important flag to override other CSS rules. However, note that this flag modifies the standard behavior of the cascade, which can make troubleshooting CSS issues quite challenging, particularly in large stylesheets.
Icon CSS Classes
Your CSS file can contain styles for icons used within components. To apply these styles, use the IconCssClass property. The following code snippet assigns icons to Context Menu items.
.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");
}
<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>
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:
Note
Customizations that rely on internal component structure rather than public API may stop working after you upgrade the project.
The following code snippet hides horizontal lines in the Grid:
.my-grid table tr:not(:first-child) > td {
border-top: none;
}
<DxGrid Data="@DataSource" CssClass="my-grid">
@* ... *@
</DxGrid>
- Default Style
- Custom Style (horizontal lines are hidden)
