I want to do some style changes (basically use Tailwind styling). I looked through the source code and most of the components have this GetComponentCssClass overridable property. However, I see it's not consistent used throughout the library.
For example the RadzenButton has some styling in the GetComponentCssClass method, but also some "hardcoded" styling in the .blazor file itself; for other components it is even more a mix where in the code behind there is a lot going on out side the GetComponentCssClass.
So just wondering if this is on purpose and whether it would be a good idea that it would be possible to make it more consistent that every class that is set on the component(part) always have an override method. This would help into implementing custom styles more easily be inheriting from the components and use a framework like tailwind.
Thanks.
Hi @Stefan_de_Vogelaere,
The Radzen Blazor components usually have more than one class so there are cases when the class name is used directly in the .razor file. In general for simple cases when the class name is predetermined we put it directly in the razor file.
Honestly I don't think replacing the entire rendering with Tailwind is a feasible task. A lot of the built-in CSS handles the component layout as well.
Ok thanks for this reply. I will try to see if I can "replace" some of the used class names with other tailwind css classes through the @apply. I am not looking for a complete theme overhaul of all components, just a subset of component I use with a basic set of parameters. I was looking to have some kind of shadcn/ui look & feel for the components.
I looked at the Studio Theme option, but that's even more work and much complicated.
Do you mean Radzen Blazor Studio? It allows you to visually customize a theme. Here is more info and a video that shows how to do such changes: Edit a Radzen Blazor theme | Radzen Blazor Studio
I had a look, but it isn't that simple.
However, I do have a question on the swatches. I basically want to start from a base primary color (a specific brand color) and then "calculate" all the rest of the colors; it seems that I can select 1 swatch, then change the primary color, but then all other colors (lighter, darker, etc) are still the colors from the swatch. Wondering if something like automatic calculation of the other colors is something you are thinking of?
I am looking at Fluent UI Theme Designer (windows.net) -> it seems I can use that to just set the wanted color and then get the "other" colors.
Hi @Stefan_de_Vogelaere,
At the moment this is not supported and we will consider adding it in the future. You can however use the SASS from our Radzen.Blazor library to generate a theme starting from your base colors.