Set class on html not working

[imtrobin]

Hi, I'm using BlazorStyled with MatBlazor, I could style like this fine

<style>
  .xxx {
     background: rgba(20,20,20,0.75);
 }
</style>
<MatAppBar class="xxx" />

But I could not get it working like this

<Styled>
    xxx {
        background: rgba(20,20,20,0.75);
    }
</Styled>
<MatAppBar class="xxx" />

I could get it working on body and using classname so blazorstyled is setup correctly.

[chanan]

That's odd, it should work.

What version of BlazorStyled are you using?

Do you have BlazorStyled in development mode? If so, in DevTools you should be able to find the style tag in the head and look inside of it (it should be something like <style blazorstyled-id="DEFAULT">...</style>) - do you see you class in there correctly?

Lastly, in DevTools, regardless of development or not, you should be able to select the MatAppBar div or what ever it generates (might be nav) and see what classes are applied to it, maybe its there but getting overridden by another class?

If all else fails can you post a github repo with a reproduction so I can take a look?

[imtrobin]

3.0.0 Alpha 7

Repro here. Look at Header.razor

https://filedn.com/l3TGy7Y83c247u0RDYa9fkp/temp/code/TestBlazorStyledWithMatBlazor.zip

[imtrobin]

I figured out what's wrong. The doc says we don't need !important, but we need that here. The css version doesn't need that though.