What is the best way to change TokenList label background to red?

Support
#1

I am using Helium theme.
For a particular Token List component in my screen, I would like to change the label background to red. I do not however want this to affect the color of other Token Lists.

#2

Hi.
You can define a new style and set it for a particular Token List as it described here.

#3

Thank you Natalia.

I used the following code that works:

<tokenList id="alertsList"
           dataContainer="patientDc"
           property="alerts"
           width="800px" editable="false" inline="true" stylename="rg-style">
    <lookup optionsContainer="allAlertsDc"/>
</tokenList>

After extending Helium theme, I added the following statements in helium-ext.scss:

    .rg-style {
        .c-tokenlist-label {
            background-color: red;
        }
    }
1 Like