html - Blazor global styles in app.css not overriding bootstrap defaults?

Question

New at Blazor client-side/web assembly, but I've created a component UserTile. This razor component has a scoped css as well as a partial cs class for the code behind.

The HTML markup is pretty simple.

<div class="card">
  <div class="card-header">@user.FullName</div>
  <div class="card-body">//more stuff here</div>
</div>

I can manipulate and override bootstrap's default card styling's pretty simply with the scoped UserTile.razor.css file, however, when I try to say, set this in the global app.css, the stylings don't get applied in the UserTile component. What gives? I've tried ::deep and important tags too.

Meaning, the following css in app.css don't get applied to the card in the UserTile component:

.card-header ::deep {
    background: transparent !important;
    border-bottom: none !important;
}

.card-footer ::deep {
    background: transparent !important;
    border-top: none !important;
}

question from:https://stackoverflow.com/questions/65599586/blazor-global-styles-in-app-css-not-overriding-bootstrap-defaults

Answer 1

Waitting for answers