CSS classes don't seem to work, only element selectors

[chrissainty]

Hey,

I've been trying to get CSS styling to work using classes for the last hour with no joy. The only styling I can get to work is using element selectors. For example, I have the following label in my component.

<Label Text="SET YOUR BUDGET" class="redText" />

In my CSS file, I have the following class.

.redText {
    color: red;
    margin-bottom: 50;
}

When I run the application none of my styles are applied to the label. However, if I change my CSS to style any Label element, then it works.

label {
    color: red;
    margin-bottom: 50;
}

I've looked at the Weather sample project which uses CSS and I can't see where I'm going wrong.

[doug-m-alexander]

HI @chrissainty,

Are you using v0.2.42-preview (preview 2) or building off the latest commit in the repo? I just tested the Weather sample project, and it worked. Later, by moving to the pre-release package instead of referencing the cloned repo, it stopped working.

[chrissainty]

Thanks for the tip @trippedoutfish.

I've cloned the repo and built some new NuGet packages as per the instructions on the docs site. But now I'm getting an exception when running the app 😕

[doug-m-alexander]

I'm happy to try and replicate what you are seeing if you let me know how.

[doug-m-alexander]

I have added a .css file with the class you mentioned

<StyleSheet Resource="Exercises.css" Assembly="GetType().Assembly"></StyleSheet> <Label Text="@(item.Name + ": " + item.AmountLeft + " / " + item.AmountTotal)" class="redText" />

This is how it looks in the app I've been messing around with for myself (thanks to your article for spurring me to action/showing me how to get started).

[chrissainty]

Is that using the official NuGet package?

[doug-m-alexander]

No, this is with the built from source NuGet packages.

They display as Microsoft.MobileBlazorBindings 0.3.8-preview Microsoft.MobileBlazorBindings.Core 0.3.8-preview

for me.

[chrissainty]

This is the error I'm seeing

[chrissainty]

I've fixed it. I had the Stylesheet component inside a StackLayout.

<StackLayout>
    <StyleSheet Resource="BudgetTracker.css" Assembly="GetType().Assembly" />

    <!-- ... Other code ... -->
</StackLayout>

I moved it outside and everything worked.

<StyleSheet Resource="BudgetTracker.css" Assembly="GetType().Assembly" />
<StackLayout>    
    <!-- ... Other code ... -->
</StackLayout>

[doug-m-alexander]

Glad to hear that you got it fixed!

[chrissainty]

Thanks for the help.

[Eilon]

Ah very interesting bug. I'm not sure why that would have happened. I'm re-opening this so that I will remember to investigate this odd error. Maybe it's OK that there's an error, but not that error.

[eyupalemdar]

Hi @Eilon , I got the same error message on version "Microsoft.MobileBlazorBindings 0.4.74-preview". I am using a tabbed page in my main app class:

MainPage = new BottomTabbedPage() {
    BarTextColor = Color.White, 
    BarBackgroundColor = Color.Black 
};
host.AddComponent<SpotifyApp>(parent: MainPage);

I get below error if I add the css file (Spotify.css) into main razor file (SpotifyApp) just like that:

<StyleSheet Resource="Spotify.css" Assembly="GetType().Assembly"></StyleSheet>

<ContentPage Title="Home"
             IconImageSource="@(ImageSource.FromFile("icon_home.png"))"
             BackgroundColor="@Color.FromHex("181818")">
    <Home />
</ContentPage>
<ContentPage Title="Search"
             IconImageSource="@(ImageSource.FromFile("icon_search.png"))"
             BackgroundColor="@Color.FromHex("181818")">
    <Search />
</ContentPage>

Error message is:

I tried another way and used the same approach as in the Weather example and it works!... It seems that StyleSheet must be added inside ContentPage or ContentView :

<ContentPage Title="Home"
             IconImageSource="@(ImageSource.FromFile("icon_home.png"))"
             BackgroundColor="@Color.FromHex("181818")">
    <StyleSheet Resource="wwwroot/css/spotify.css" Assembly="GetType().Assembly"></StyleSheet>
    <Home />
</ContentPage>
<ContentPage Title="Search"
             IconImageSource="@(ImageSource.FromFile("icon_search.png"))"
             BackgroundColor="@Color.FromHex("181818")">
    <Search />
</ContentPage>

I got a new error message after added @font-face to css file:

@font-face {
    font-family: 'circular_book';
    src: url('../fonts/circular_book.ttf') format('truetype');
}

@font-face {
    font-family: 'circular_medium';
    src: url('../fonts/circular_medium.ttf') format('truetype');
}

label {
    font-family: 'circular_book'
}

.medium-label {
    font-family: 'circular_medium'
}

.bold-label {
    font-family: 'circular_bold'
}

Error message:

[Eilon]

@eyupalemdar thank you for all the detailed information! I can now try to reproduce this. Hopefully an easy fix!

[Eilon]

The fix is in for making the StyleSheet control work pretty much anywhere you place it. It will ship in Preview 5, or you can use the nightly feed: https://docs.microsoft.com/mobile-blazor-bindings/contribute/nightly-builds

As for AT-rules not being supported, that is a limitation of Xamarin.Forms, which you can see in that code here: https://github.com/xamarin/Xamarin.Forms/blob/a8bcaa9a609cfa6f3026775b26ab7adfb4947772/Xamarin.Forms.Core/StyleSheets/StyleSheet.cs#L77-L78 . If that's a blocker for you, please file an issue at https://github.com/xamarin/Xamarin.Forms/issues