Blazor Components are Rendered Incorrectly

• Oct 25, 2023

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 v22.1, make sure that resources and themes are linked correctly. v22.1 includes a breaking change that affects Blazor component render.

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

• 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 implement CSS-related solutions for DevExpress components to determine which CSS rules cause this issue.

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