CODEWITHSUNDEEP
cssblazorprogressive-web-appsisolation
yigit sertac
yigit sertac

Reputation: 33

Blazor PWA Components Styling with css

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.

Upvotes: 0

Views: 497

Answers (1)

yigit sertac
yigit sertac

Reputation: 33

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.

Upvotes: 1

Related Questions