[HELP]: How to change the font size, text color and font weight of tag in MultiSelect Item ?

[alamenai]

Tremor Version

@latest

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]

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