Hi Massimo,

If you inspect the element in your browser, can you then see the class?

If you see the class, perhaps you can see in the inspector why your css is overwritten.

Also, you can create different scss files, such that not everything has to be included in your custom-variables.scss. If you create a new scss file, don't forget to import it in your main.scss

Hope this helps!

The class “tr” is getting the dynamic class, but this div has no width and height. 
It has to be

.beacon-grid2-black {

    .td {

        background-color:#eca51c;

    }

}

Thank you, Johan and Christian.

We are almost there, but not yet. The syntax that somehow worked for me is as follows (it was just a trial-and-error exercise):

.table {
    .td {
        &.beacon-grid2-black {
            background-color: #ffffe0;}
        &.beacon-grid2-red {
            background-color: #ff0000;}
        }
    }

The funny part is that I’m having the right color only on ODD rows…

Hi all.

Javith: my condition is right (if Version is different from Current, the background should be red), look at the picture I attached.

Christian: Yes, I tried. It didn’t work.

Johan: I use the inspector, thanks for the suggestion. The styling is not overwritten for the ODD rows (indeed it works), I’m not sure about the EVEN rows, I’ll check later. 

Hi Johan, your suggestion worked indeed.

BTW, in my implementation, the STRIPPED appearance feature is ON.

The syntax that did the trick for me is as follows:

.table .tr .td {

            &.beacon-grid2-black {

                background-color: #ffffe0;}

            &.beacon-grid2-red {

                background-color: #ff0000;}

            }