0

There is this problem i have working with .net5 blazor PWA project.

I have two css file. One is created by the blazor project app.css and the other css file is a css isolated file. I don't know if it is specificly css isolation problem but the issue is i can't style blazor html elements with isolated css file, like editform, inputtext...

In my css file i have this css lines below:

editform {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0rem 5rem;
    overflow: hidden;
}
.text-area inputtext {
    background: none;
    outline: none;
    border: none;
}

Well, I had my research but no luck so far. Do i make something wrong here?

Thank you in advanced.

2
  • from the Ms docs : 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. To apply changes to a child component, use the ::deep combinator to any descendant elements in the parent component's .razor.css file learn.microsoft.com/en-us/aspnet/core/blazor/components/…
    – yasseros
    Apr 8, 2021 at 13:35
  • Thanks for your reply, while i wrote the answer didn't see your comment. That's what i found out too. Thank you for your time, preciated. Apr 8, 2021 at 13:58

1 Answer 1

1

Well, I found the solution.

Blazor custom elements(component is the right terminology I don't know) renders to its related HTML elements. For example, <EditForm> renders to <form> element.

So, in order to access rendered element we need ::deep .

The css style for editform in my question becomes:

form, ::deep from{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
overflow: hidden;
}

.text-area ::deep input {
background: none;
outline: none;
border: none;
}

If having a class in that deep element I used following code:

::deep .customClass

This solution is worked for me but i wonder if there is some other way to style blazor custom elements. Because blazor uses this component <app></app> .net core 3.1. And if you check the css file in the project you can see the styling is happening with the code below just like normal HTML element.

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

This confuses me. Any information about this topic much appreciated.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.