New Stylesheet property

I am trying to do the following:

on page level I define stylesheets

  stylesheet: |
    .csslabel {
      font-size: var(--my-font-size);
      font-weight: 500;
      height: var(--my-font-size);
      user-select: none;
      -webkit-user-select: none;}
    .csslabelinactive {
      color: var(--my-font-color);}
    .csslabelactive {
      color: var(--my-font-color-active);}

on widget level THIS is working:

class: '=(items[props.item].state == "OFF") ? "csslabelinactive" : "csslabelactive"'

but THIS is not working

  - csslabel
  - '=(items[props.item].state == "OFF") ? "csslabelinactive" : "csslabelactive"'

the resulting code is:

<div class="csslabel =(items[props.item].state == "OFF") ? "csslabelinactive" : "csslabelactive"'></div>

I do probably wrong with quotes. does anybody have a clue?

You are missing a " after OFF.

just a copy/paste error in this post. code is correct

trying to achieve it this way:

class: '="csslabel " + (items[props.item].state == "OFF") ? "csslabelinactive" : "csslabelactive"'

but don’t know the correct syntax to combine an if/then expression with a string. any idea?


class: '="csslabel" + (items[props.item].state === "OFF" ? "\ncsslabelinactive" : "\ncsslabelinactive")'

you’re a star! not in a few years I would have come to that solution by myself…
many thanks. that will make things much easier

yes he is!!! :+1: