Add CSS Class to Components

Feature Requests
1

It would be awesome if I could add css classes to a retool component.

For example, say I wanted to style 3 tables to have a shadow.
Currently, I would have to do this:

._retool-table1,
._retool-table2,
._retool-table3 {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

Instead, I would rather have a css class defined like this:

.has-shadow {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

and then add the CSS class 'has_shadow' to the individual tables.
I could then put this as a global css override- making adding the shadow to other tables and apps much easier and maintainable.

9 Likes
2

If possible, it would be great to be able to add classes to both the element and it's container (if it has one) independently.

So, for example I could have a class add to the same element as "._retool-container-table1" and "._retool-table1" seprately.

3

I am also looking for this.

4

Added your plus one the internal ticket to track this! And for anyone else, please keep adding plus ones to help prioritize :pray:

5

+1000

6

+1

7

+1

8

+1

9

+1

10

+1

11

+1

12

+1 x 100000

13

+1
Are there any other hacks to making this work besides listing out every single component that I want to apply the style to?
Also it would be helpful to have more controls at the theme level similar to tail wind css.