How do i apply custom class styling to components within my MainLayout?

[PascalVorwerk]

💬 RFC

Hi, for some reason when i am trying to add some scoped css to my components it does not work. The tags that are eventually introduced in the html are completely different then those that are bundled in my css.

Bundled css:

Mainlayout html component:

This is causing that even a deep selector wont work, because the tags are different and thus it won't affect the components..

Has anyone else tried the suggested css styling?

I have also found why the components are different tags:

My project structure is as so:

Web.API (Containing API logic)
Web.Client (Containing the Razor components for both client and server side rendering)
Web.Server (Containing the app.razor and bootstrapping everything server side)
Web.Wasm (Containing the blazor WASM client that bootstraps everything for client side)

I don't know if it's because of my specific project structure that this is screwing things up, but help would be greatly appreciated!