How to use custom css class for Radzen components?

Radzen.Blazor Components
1

Hi there,

I'm looking for a quick way to handle each component styles directly from Radzen parameter.

For.ex. If i set my css class to component directly, it can be affect some property clearly but not all. I'm using large ui inputs, but it didn't change like line-height, text font size etc. Also popup element and inner styles needs more modifications to css classes starts with .rz-dropdown

<RadzenDropDown class="myclass"  
                                 ...
                                 ... />

is it possible to handle like this;

<RadzenDropDown CssClass="MyInputClass"
                                 DropdownCssClass="MyPopupClass"
                                 ...
                                 ... />

or maybe you guys can port customization directly to css files. I believe that many users of Radzen Blazor components are focused on backend development so they are going to use startup templates or free/paid html templates. They will need to keep standard ui visibility for each components on page and the rest part of page.

2

You are right. Custom css classes are available only for root elements - complete CSS customisation can be performed using custom themes. Check our themes for reference:

1 Like
3

Radzen components use custom CSS themes and CSS classes which I am positive most html templates don't utilise. You have to either use a built-in theme or create a custom one. We also offer premium themes and a visual theme customization tool as part of the Radzen Professional Subscription.

1 Like
4

Hey @korchev,

Thanks for detailed answer.

I suggest you to wrap common css framework classes for rz css classes like bootstrap, bulma, tailwind etc. Many of html template creators are using common names which are totally fit with css framework. I think this is a huge thing for ui component library like Radzen.

5

Supporting third party CSS frameworks isn't on the roadmap.

7

Hello again.

I would like to ask for any changes to the roadmap. I believe that all of those design systems can enhance Radzen Blazor components.

Fluent looks great. Material looks great. (though I am not a fan of Material). I'd like to create an Ant design theme for Radzen Blazor components. Can I only purchase premium themes?

I understand that Bulma, Skeleton, Tailwind and others are not in your roadmap. I don't need those either. But I want design system integration with Radzen components.

Thanks.

8

There are technical reasons for not supporting arbitrary design systems. Here are the major ones:

  1. Design systems are different and contain different primitives - they use different CSS classes to convey certain things (button styling, paddings etc). This alone would require X different rendering implementations for Y components. I know there are vendors who use that approach but we can't afford the sheer effort required to support X different rendering implementations on top of the existing one.
  2. Design systems lack styling / primitives for certain UI components (Scheduler, Chart, Gauge are the first that come to mind). Or in some cases they have the basis (a Table) but don't have the complex features (DataGrid with grouping, hierarchy etc).

In this context our response remains the same - we don't plan to provide rendering implementations based on a specific design system.

We are doing something different instead - provide themes that match the UX of a design system instead of using its CSS implementation. For example we already have a Material and Fluent themes. They are using the existing Radzen CSS classes though. We may also add themes that look like Tailwind, Bulma or whatever the current modern design system is. It would again be using the Radzen CSS classes and won't be customizable as a regular Tailwind theme for example (via custom build). This is the approach that most (all?) commercial component vendors have adopted and it has proven to be a reasonable compromise.

2 Likes
9

Excellent explanations.
Thank you.

If you would like, I can assist you with building Ant theme by using the Radzen CSS classes though. If interested, I'll get in touch with you.

There should be a design that looks like an enterprise level app, and all of those components should work together.

Radzen and Radzen Blazor components are great.
Thanks for your work.

10

Hello @Developer,

Thank you for raising this design systems question.

We'd like to better understand what your need exactly is? It will be really helpful if you can elaborate on the reasoning to have an Ant design theme. Is it colors, component sizing, interaction states, or consistency with any other app of yours that is already using Ant design? Or is it just because it is trendy? All these could be well valid reasons, and figuring out what exactly they are could help us prioritise or find alternative solutions (e.g. customizing an already existing theme instead of creating and supporting a new one from scratch).

We will appreciate it if you can better explain or share examples of what is in the "design that looks like an enterprise level app" that for example our recently shipped Standard theme does not cover and could be improved with?

1 Like
11

Hello @yordanov,

Thank you for responding.

I can explain my needs as follows:
There should be a common design system for all user interfaces.

We should use the same approach in all applications for all similar issues, such as CRUD pages, report pages, list pages with detailed information, a single page with multiple tabs, and specific design pages for form input, schedule pages, chart pages, etc.

I would be the happiest man in the world if I could keep Radzen and Ant design in one application. Standard theme is excellent. It is similar to Ant design.

  • My goal is to create a boilerplate for creating Blazor Server Apps with Radzen Blazor and Ant design.
  • In Ant design system standards, Radzen components will be used by pages.
  • Radzen component styles should be similar to Ant. Therefore, users will not think that the pieces look very different from one another.
  • Creating a user interface requires using some HTML templates. Unfortunately, they use css frameworks such as bootstrap, bulma, tailwind, etc. The users should think that Radzen components belong to that page when we add them to the page. It should be consistent throughout.

The solution to my problem and that of the same-thinking developers is to modify Standard theme for design systems like Material, Fluent, Ant, etc.

Thanks.

3 Likes