CSS Classes

• Jan 20, 2026
• 4 minutes to read

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

YouTube video

Add CSS Rules to a Project

You can attach a .css file to your project. Key steps include:

1. Copy a stylesheet file to the wwwroot/css folder.
2. Call the RegisterTheme(ITheme) method in the Components/App.razor file.
3. Pass a theme as a parameter and call its Clone() method to access theme properties and modify the theme.
4. Call the AddFilePaths(String[]) method and pass stylesheet paths as a parameter. You can pass one or more paths in a single method call.

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.Name = "Fluent Custom";
    properties.AddFilePaths("css/my-styles.css");
}))

You can also define styles in .razor.css files. Refer to the following topic for additional information and specifics: CSS Isolation.

Apply Styles to Components

DevExpress components allow you to use the following CSS-related properties:

CssClassAssign CSS classes to components. For example, DxCarousel.CssClass or DxChartLegend.CssClass.*CssClassAssign CSS classes to component elements. For example, DxCalendar.HeaderCssClass or DxMenu.SubMenuCssClass.

The following code snippet applies custom styles to the TreeView component:

• Razor
• CSS

<DxTreeView CssClass="my-style">
    <Nodes>...</Nodes>
</DxTreeView>

.my-style {
    color: orange;
}

Note

DevExpress Blazor components do not support CSS zoom-related properties, such as zoom, scale, and transform.

Why Your Custom Style Can Be Ignored

DevExpress controls include predefined CSS styles applied to their elements. If your CSS property declaration is ignored, there may be another predefined or custom rule with a 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:

• Razor
• CSS

<DxFormLayout >
    <DxFormLayoutItem Caption="Location:" CaptionCssClass="my-style">
        <DxTextBox Text="London" />
    </DxFormLayoutItem>
</DxFormLayout>

.my-style {
    font-weight: 600;
    color: orange;
    font-style: italic;
}

The assigned rule includes 3 property declarations, but only the font-style property value is applied.

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 example, add a CSS class to the component and add the class selector to the CSS rule.

• Razor
• CSS

<DxFormLayout CssClass="my-fl-style">
    <DxFormLayoutItem Caption="Location:" CaptionCssClass="my-style">
        <DxTextBox Text="London" />
    </DxFormLayoutItem>
</DxFormLayout>

.my-fl-style .my-style {
    font-weight: 600;
    color: orange;
    font-style: italic;
}

For additional information about how a browser calculates rule priority, refer to the following topic: Understanding the cascade.

Note

You can override predefined classes to change default element appearance. Note that this solution relies on non-public APIs and 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. 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:

• 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 the Icons help topic for additional 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 help topics for additional information:

• How to inspect CSS rules
• How to use CSS to customize control appearance
• Use CSS Variables in Blazor Fluent themes

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:

• Razor
• CSS

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

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

Default Style Custom Style (horizontal lines are hidden)