Inject CSS class via JS

Hello @Jake_Slack!

I don't think it's possible to apply selectors to Retool's DOM elements using JS at runtime.

You can use {{ }} to reference retool values when writing custom CSS.

The buttons have the date set as the aria-label so you could do something like this.

{{ query4.data.map(d => [aria-label="${d}"] {background-color: blue !important;}).join('') }}

query4.data is an array -> ['2025-01-01', '2025-01-04']

Retool may change selectors / DOM structure with any update though which can break custom CSS. So it would probably to build a custom component if you want something more reliable.

I can make a feature request to make custom styling for specific days inside our calendar component easier as well and will keep you posted on that!

1 Like