Blazor Components are Rendered Incorrectly

• Sep 20, 2023
• 2 minutes to read

DevExpress Blazor components can be rendered incorrectly in the following cases:

• DevExpress resources are not registered in a project. Refer to Register DevExpress Resources.

• Incorrect CSS stylesheets are linked. If you use CSS Isolation, ensure that you wrapped the DevExpress component in a markup element and applied the ::deep combinator to CSS rules. If your application uses v22.1 or later, make sure that resources and themes are linked correctly. Refer to the following breaking change for more information: v22.1 - The location of CSS resources for DevExpress Blazor controls has changed.

• The application’s Bootstrap version does not match the theme.

• You use a custom theme based on one of the DevExpress Blazor themes. Rebuild your theme with a new theme’s source file.

• A breaking change was introduced. In v22.2 and v23.1, we changed the way components are rendered:

  • v22.2 - Bootstrap rendering was replaced with a new rendering engine
  • v23.1 - Navigation and Layout components - Bootstrap rendering was replaced with a new rendering engine
  • v23.1 - DxTabs - The component render has changed

  Refer to the following document for upgrade instructions: DevExpress Blazor Components - How to Update CSS Styles.

• The application’s static resources were cached. If you do not implement any solutions to refresh cached resources on user machines, add the asp-append-version attribute to the theme link. The attribute ensures that web browsers on user machines use the actual version of DevExpress CSS resources instead of a cached version.

• You used Visual Studio’s built-in Blazor project template to create your project. CSS rules for the standard NavMenu component (NavMenu.razor.css) match certain Bootstrap classes, such as .nav-item. DevExpress Blazor components (DxTreeView, DxTabs, or DxMenu) may render incorrectly due to these conflicts. To resolve the issue, modify the CSS file and the NavMenu component. Use the techniques described in How to inspect CSS rules and How to use CSS to customize control appearance to determine which CSS rules cause this issue.

  There are classes from the site.css or app.css file (for example, .btn-primary, .btn-link) that can affect the DxButton and DxToolbar components. To resolve this issue, modify the rules for these classes.