How to style a Radzen SelectBar

Radzen.Blazor Components
1

In my xyz.razor.css I have the following override classes (see below):

When I run my app, they don't show up. I only see that the custom theme classes were loaded. I am loading the blazor css file last (see Below):

Any ideas on why the local styles are not overriding the custom styles?

I also noticed the class names are hard coded. What if I had two SelectBars which needed different style treatment, how can I get the control to use different classes? Inline styles are not an option as I want to preserve theming so I only want to reference classes.

order of stylesheets

<link href="css/radzen-custom.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorVerticalSlice.styles.css" rel="stylesheet" />

xyz.razor.css override classes:

.rz-selectbutton .rz-button:first-child, .rz-selectbutton .rz-paginator-element:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-radius: 29px;
width: 50%;
text-align: center;
margin: 5px;
}

.rz-selectbutton {
display: inline-block;
background: #eeeeee;
background-color: #eeeeee;
border-radius: 28px;
}

.rz-selectbutton .rz-button.rz-state-active, .rz-selectbutton .rz-state-active.rz-paginator-element {
background-color: #ffffff;
color: #007991;
}

thanks
Rob

2

I believe the answer is how blazor does css-isolation.

ASP.NET Core Blazor CSS isolation | Microsoft Docs

Example:

h1[b-3xxtam6d07] {
color: brown;
}

when the radzen component is rendered it looks like this:

The radzen div is not tagged with the same "b-" id, and therefore will not see the css isolation class.

Solution: use ::deep

In the parent xyz.razor.css set ::deep .rz-selection and the razden control child will pick it up.