Media Queries not working after upgrade to v3

[esso23]

Example class:

<Styled @bind-Classname="@ExtraSmallOnlyClass">
    @@media (min-width:0px) and (max-width:599.95px) {
    display: none;
    }
</Styled>

When I inspect it in Chrome the styled div looks like this <div class=" "> ... (There's space instead of class)

[chanan]

I will check it out right away, sorry about that

[chanan]

@esso23 Did that syntax work prior to V3? If so, I will need to work on getting it back up and running again. In the meantime you can use the following syntax:

<Styled @bind-Classname="@ExtraSmallOnlyClass">
        @@media (min-width:0px) and (max-width:599.95px) {
            &{
                display: none;
            }
        }
    </Styled>

The & will be replaced by the dynamic name of the class

[esso23]

Yes, it worked with 2.2.0. Thanks, I'll use this in the meantime.

[esso23]

It still does not work. This is the class I'm currently trying this on:

<BlazorStyled.Styled @bind-Classname="@FontClass">
    @@media screen and (max-width: 400px) {
        &{
            font-size: 60% !important;
        }
    }

    @@media screen and (min-width: 400px) and (max-width: 600px) {
        &{
            font-size: 70% !important;
        }
    }

    @@media screen and (min-width: 600px) and (max-width: 800px) {
        &{
            font-size: 80% !important;
        }
    }

    @@media screen and (min-width: 800px) and (max-width: 1100px) {
        &{
            font-size: 90% !important;
        }
    }

    @@media screen and (min-width: 1100px) {
        &{
            font-size: 90% !important;
        }
    }
</BlazorStyled.Styled>