[HELP]: How to change the font size, text color and font weight of tag in MultiSelect Item ?
alamenai opened this issue · comments
Ala Eddine Menai commented
Tremor Version
Link to minimal reproduction
None
Steps to reproduce
I have MultiSelect component which I used it for roofs selection and I wanted to change the font size, background and colo of the TAG component.
As you see , I have two selected roofs but their background is gray, I want to make them blue , text white and font weight should be medium.
I tried font-medium
, text-white
and bg-blue-500
but they did not have any impact.
Code
<MultiSelect
defaultValue={selectDefaultRoofs}
icon={InspectIcon}
className='[&>*]:h-12 mt-3 ring-neutral-600 font-medium'
onValueChange={(values) => selectRoof(values)}
placeholder='Wählen Sie ein Dach aus'
placeholderSearch='Suchen'
color='#000'
>
{roofs?.map(({ roof_id }) => (
<MultiSelectItem className='text-lg font-bold' key={roof_id} value={roof_id.toString()}>
{roof_id.toString()}
</MultiSelectItem>
))}
</MultiSelect>
What is expected?
.
What is actually happening?
.
What browsers are you seeing the problem on?
Chrome
Any additional comments?
No response
christopherkindl commented
Hi @alamenai, we use theme tokens for font size. Try overriding as follows, e.g.
<MultiSelectItem className="text-tremor-label"> =(text-xs)
More about theming: https://www.tremor.so/docs/ui/select#theming