Blazor Tags css styles

Oliver 21 Reputation points
2023-05-30T19:38:06.9933333+00:00

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.

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,494 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Zhi Lv - MSFT 32,086 Reputation points Microsoft Vendor
    2023-05-31T02:10:04.6+00:00

    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:

    User's image

    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:

    User's image


    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

    1 person found this answer helpful.
    0 comments No comments