Trying to bold/unbold labels on standard components (ie KeyValue, Tabs)

  • Goal: Trying to bold tab labels, and unbold labels on KeyValue

  • Steps: I've tried adding custom CSS as below, but while this does the job in the immediate term, the classes seem to change periodically so the effect is reverted.

._qYX46 { /Labels on key value pairs/
font-weight: 400 !important
}
._TzWvU { /label on dashboard statistic/
font-weight: 400 !important
}
._Z+gd3 { /tabs/
font-weight: 600 !important
}

Is there any way I can get this small change in formatting to persist?

Thanks guys, and congrats to all involved at Retool on continually pumping out great updates! Love your work.

Hey @BenCook
Without using custom CSS (which I agree is not ideal longterm), the closest you can get to your goal is to use the built in options in Styles section of the component, like font size, label font size, label color. For example you can change the label color to gray color or any hex which makes sense to you, or change the font size by 1px using fx feature manually to emulate being bold, or reduce it to get the different effect.


Hope this helps! :sun_with_face:

1 Like

Hi @BenCook! We are actively working on supporting extended typography controls in the theming and component styles (font weight, font family) -- stay tuned for some updates here on managing font weight without custom CSS!

2 Likes

Hi @mckenna ,

Thanks for the update - I'll sit tight until that's ready to go.

Hopefully it will be similar to theming -ie can be done at an app/global level - rather than have to be done as the component level (and on every instance of that component).

Cheers,
Ben

1 Like

Thanks @Milan_Kalem , that'll be a good start.

Yes, that's the goal!

2 Likes

@mckenna love it! I'm sure it will be brilliant.

1 Like

you're welcome, looking forward to seeing the new update, which will make this much easier

Any update on this? Looking for how to change label style for keys in KeyValue component.
But nothing seems to work

Hi there! Thanks for checking in. We added font weight controls to the Style section.

See this example where I've set the Label font to Heading 1:

1 Like