CSS Classes
- 3 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
<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
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 TreeView:
<DxTreeView CssClass="my-style">
<Nodes>
<DxTreeViewNode Text="Metals">
<Nodes>
<DxTreeViewNode Text="Alkali metals" />
<DxTreeViewNode Text="Alkaline earth metals" />
<DxTreeViewNode Text="Inner transition elements">
<Nodes>
<DxTreeViewNode Text="Lanthanides" />
<DxTreeViewNode Text="Actinides" />
</Nodes>
</DxTreeViewNode>
<DxTreeViewNode Text="Transition elements" />
<DxTreeViewNode Text="Other metals" />
</Nodes>
</DxTreeViewNode>
<DxTreeViewNode Text="Metalloids" />
<DxTreeViewNode Text="Nonmetals">
<Nodes>
<DxTreeViewNode Text="Halogens" />
<DxTreeViewNode Text="Noble gases" />
<DxTreeViewNode Text="Other nonmetals" />
</Nodes>
</DxTreeViewNode>
</Nodes>
</DxTreeView>
Other classes can also have a CssClass or *CssClass property, for example, DxChartLegend.CssClass, DxInputDataEditorBase<T>.InputCssClass. The code below applies a CSS class to a toolbar item (the DxToolbarItemBase.CssClass property):
<DxToolbar>
<DxToolbarItem CssClass="my-toolbar-item" Text="Insert"></DxToolbarItem>
<DxToolbarItem Text="Edit"></DxToolbarItem>
<DxToolbarItem Text="Delete"></DxToolbarItem>
</DxToolbar>
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.
<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 code below hides horizontal lines in the Grid:
- Default Style
- Custom Style (horizontal lines are hidden)
