Style selector is not selecting targe elements

[vit100]

I have trouble with applying styles using style isolation in blazor.

I see HTML generated in the browser like this with class="rz-text-body1" (it doesn't matter what component)

 <p class="rz-text-body1" id="5X6Y-0JfBE" _bl_1cd2875c-bd1a-422c-a74e-6ef2f70d3b38="">
 blah blah
</p>

I try to apply style to this element from file <MyComponent>.razor.css

.rz-text-body1 {
font-size: 3.5rem
}

CSS generated looks like this with standard blazor format with unique attribute b-:

.rz-text-body1[b-qc60qf4cho] {
font-size: 3.5rem
}

And as a result style is not applied. Any idea where that long attribute coming from in the target element (_bl_1cd2875c-bd1a-422c-a74e-6ef2f70d3b38=)? Templated blazor app had short attributes attached to elements which match styles defined in CSS file.

If I set style in header or body of the component - all is working as expected, style selector is not manipulated and applied properly.

[korchev]

Check here: ASP.NET Core Blazor CSS isolation | Microsoft Learn

[vit100]

Works. Thanks.
The confirmation popup dialog is still stubborn and I still can't find a class to increase the font in text.

I need to increase text : Are you sure you want to start from beginning? in this code

var result = await dialogService.Confirm("Are you sure you want to start from beginning?", options: new ConfirmOptions()
{
OkButtonText = "Yes",
CancelButtonText = "No",
});