CSS Class Overlords for Markup Items

Radzen.Blazor Components
1

I have a question because me and my coworker have been unable to find a proper solution. We utilize Tailwind for styling, and have been working to implement dark mode into our website. The Tailwind side of things was straightforward and is complete, but Radzen has been proving more challenging. Stripping out many of the hard coded color values from the SCSS has solved the majority of issues, but we have run into a wall when it comes to Radzen markup that implements additional objects that require styling. For example tabs, datepickers, and dropdowns.

Below is a drop down, Tailwind picks up for the base input box but passing classes does nothing to control the CSS for the dynamically created drop down. Removing the CSS colors simply made it transparent. Is there a way we can pass CSS values to the markup so we can control the bg, text, hover, and select like options for objects?

image

image

<RadzenDropDown TValue="int" Data=@departments TextProperty="DepartmentName" ValueProperty="DepartmentId"
                                @bind-Value=departmentID class="bg-white text-gray-900 dark:bg-zinc-700 dark:text-white w-96" Change="DepartmentChanged" />
2

You can probably use CSS variables. Here are the ones that the RadzenDropDown uses: radzen-blazor/_dropdown.scss at master · radzenhq/radzen-blazor · GitHub

3

Hmm, I have never controlled the variables from outside the SCSS how would I go about that?

4

Those are standard CSS variables and allow you to override various settings without modifying and building the SCSS. The Radzen.Blazor CSS variables are set via :root so you can override them easily. For example:

.bg-white {
   --rz-dropdown-open-background-color: white;
}

.bg-dark {
   --rz-dropdown-open-background-color: black;
}
5

I finally figured this out this morning, the solution was to remove the radzen class from the SCSS and then use a Tailwind class override. In the case of dropdown this code gave me the basic appearance I wanted and respects dark mode.

.rz-dropdown-item {
    @apply bg-white dark:bg-zinc-700 text-gray-900 dark:text-white hover:bg-gray-300 dark:hover:bg-zinc-500;
}

image