Changing a UI Builder component background color based on database value

[Nancy Aud2]

I am building a UI builder page that is using a repeater with a stylized text component inside. I would like to change the background color of that text component based on a specific value from the database. (ie... if the value is "X" make the background color red, if it is "Y" make it blue otherwise make it yellow.) Does anyone have any ideas on how to accomplish this?

[Jon G Lind]

Unfortunately you can't bind data to the CSS properties.  We have heard this request before so I just added it to the ideas backlog.  If you can, anyone reading this go vote on it.

[Nancy Aud2]

Thank you.

[JagjeetSingh]

You can use dynamic CSS in Stylized text component to achieve this. Some of the components like stylized text comes with CSS property which you can bind with your data source output or with state parameter. For example, In your case I'd add below CSS to my stylized component and then bind it to state parameter to make it dynamic.

Here I won't use any styling at my container level and apply all CSS on my stylized text component.

* { 
    color: #f7fcfb;
    background-color: rgb(94, 132, 175);
    font-size: 20px;
    padding: 5px;
}

Hope this helps.

[Nancy Aud2]

This doesn't seem to work for me. I need to dynamically set the color value.