How to specify background color in a text block

I am trying to implement the Color property in the Data panel.
I want to set the Background color of a Text Block element.
I have a property (provided from a web service) that provides a string, such as: rgb(200,255,200)
I have tried to feed this in to the Color property, but the Text Block is still showing a White background.
Put another way, how can one set the background color of a text block using a data sheet value?


There is no background color setting for text elements. The color prop is meant for text color but is not implemented in the current version.

You’d need to figure this out with Custom CSS property which code exporter will be added in the next “bugfix release” which will become available later this week.

Perhaps it would be possible to set the color of a Rectangle/Box element. I could then place this behind the text box with the rectangle set to fill the cell of the table. I note that the Rectangle object does not currently take a Color property, but I imagine that it could.

Never mind. I’m going to implement this with a react component instead. Thanks.

Yes you can simply create component with two states; one with background color and one with transparent bg.

Thank you for the recommendation, but this component has 10+ cells and they will each need independent color control and this will require too many states to be feasible…
Is there a way to access the JSX Style object or the CSS for given cell/field?
You mentioned a code update with this fix coming in the next week or so. Was it last week or is it still coming?
If so, could you provide a little sample code showing how to use this update?

Hi all. Any updates on when or who to access to the Custom CSS object? Thanks.

Most likely the update will be out at the end of this week.

1 Like

Here’s a demo of the upcoming Custom CSS implementation:

1 Like

The update is out now. Update contains code export for Text element’s Custom CSS inplementation and Color props.

Note that Custom CSS syntax is like this: “backgroundColor”: “lightblue”

1 Like

Thank you! I will need that today!