Blazor Tags css styles

Question

Dear Community!

I already asked on reddit but nobody could help me. How can i apply css styles from the name.razor.css file to Blazor custom tags like the <InputText> for example? Defining styles for input or creating as custom class do not work only inline styles work but on the isolated css file would be more comfortable.

Answer 1

Hi @Oliver

How can i apply css styles from the name.razor.css file to Blazor custom tags like the <InputText> for example? Defining styles for input or creating as custom class do not work only inline styles work but on the isolated css file would be more comfortable.

The issue relates the CSS Isolation. More detain information about CSS isolation, see ASP.NET Core Blazor CSS isolation

By default, CSS isolation only applies to the component you associate with the format {COMPONENT NAME}.razor.css, where the placeholder {COMPONENT NAME} is usually the component name.

For example:

From the above screenshot, we can see that because of CSS Isolation, for each styled component, an HTML attribute is appended with the format b-{STRING}, but for the built-in components/child (such as the InputText component), it doesn't add this attribute and we can't find the testclass1 CSS style from the Elements Styles. So, the CSS style not working.

To apply changes to a child component, use the ::deep pseudo-element to any descendant elements in the parent component's .razor.css file. The ::deep pseudo-element selects elements that are descendants of an element's generated scope identifier.

Code like this:

::deep .testclass1 {
    width: 500px;  
}

After that, the result as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion