ChevronIcon is missing

[mothy900]

The Icon in react-tailwin-select (which ChevronIcon) is missing

I try to className - ChevronIcon option w-[30px], h-[30px], bg-color but it does'n work.
'ChevronIcon' class option is missing at web dev-tools Styles.

Here is source code

className :

export const tableClassName = {
    listItem: (value?: { isSelected?: boolean | undefined }) =>
        `m-0 py-2 px-5  cursor-pointer block list-none select-none ${
            value?.isSelected
                ? 'text-primary bg-[#f4f6fa] dark:bg-[#2b2b40] '
                : 'hover:text-primary hover:bg-[#f4f6fa] dark:hover:bg-[#2b2b40] '
        }`,
    list: 'w-[150px] md:w-[150px] lg:w-[150px] text-sm text-gray-700',
    listGroupLabel: 'px-0',
    tagItem: () => 'w-[150px]',
    ChevronIcon: () => 'w-[30px] h-[30px] px-0 bg-error',
    menuButton: () =>
        'dark:bg-[#1b1b29] bg-[#f9f9f9] h-[42px] bg-gray-200  flex w-[150px] items-center text-left text-sm text-gray-700 rounded-md px-3',
    tagItemIconContainer: 'bg-warning w-[150px]',
    menu: 'absolute z-10 w-[150px] bg-neutral-focus shadow-lg border-0 rounded py-1 mt-1.5 text-sm text-gray-700  ',
    tagItemIcon: 'bg-error'
}

Select :

<Select
      value={label}
      onChange={handleChange}
      options={selOptions}
      primaryColor={'indigo'}
      classNames={tableClassName}
/>

Additional : ChevronIcon is missing with default option too

Ps. why primaryColor is required?

[fahimshah36]

There are 2 ways to solve this - Either you could use "patch-package" npm to directly modify the select package.
Another way is to use MutationObserver and document.querySelectorAll to modify the element.
I used this code to modify the chevron icon to rotate 90 degrees-

useEffect(() => {
   const applyRotation = () => {
     const chevronIcons = document.querySelectorAll(
       'svg.transition.duration-300.w-6.h-6.p-0\\.5.text-gray-300'
     ) as NodeListOf<SVGElement>

     chevronIcons.forEach((icon) => {
       icon.style.transform = 'rotate(90deg)'
     })
   }
   applyRotation()

   const observer = new MutationObserver(() => {
     applyRotation() // Reapply rotation whenever the DOM changes
   })
   observer.observe(document.body, {
     childList: true,
     subtree: true,
   })
   return () => {
     observer.disconnect()
   }
 }, [])