gluestack-ui v2 InputField - Not accepting color changes to text and placeholder using className.

[technologyconsulting]

Description

setting input field text color doesn't work. I should be able to set the color.

CodeSandbox/Snack link

https://I-do-not-know-how-to-set-gluestack-up-in-a-snack

Steps to reproduce

This is what i have and the text and placeholder colors do not work if i use className? If i use the style={{}} then they do?

<InputField`
type="text"
placeholder="Search"
className="h-12 text-pink-500 placeholder-pink-500"
style={{}}
 />

If I add a bg-pink-500 to color the background then the background color is set!

gluestack-ui Version

2

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

Expo 52, react-native 0.76.3, nativewind 4.0.36, tailwindcss 3.4.15,

[technologyconsulting]

Also, the placeholder text doesn't respect dark mode. The input border, icon and text does but not the placeholder text?

FYI - All my other components and gluestack ui elements are ok... So far.

[technologyconsulting]

There seems to be something wrong with the way you're mapping the css properties. If i remove placeholder:text-typography-500 from the base: then using text-pink-500 and dark:text-yellow-500 in the className starts working.

Removed placeholder:text-typography-500 from the base: from the following code in the index.tsx.

const inputFieldStyle = tva({
  base: 'flex-1 text-typography-900 py-auto px-3  h-full ios:leading-[0px] web:cursor-text web:data-[disabled=true]:cursor-not-allowed',

  parentVariants: {
    variant: {
      underlined: 'web:outline-0 web:outline-none px-0',
      outline: 'web:outline-0 web:outline-none',
      rounded: 'web:outline-0 web:outline-none px-4',
    },

    size: {
      '2xs': 'text-2xs',
      xs: 'text-xs',
      sm: 'text-sm',
      md: 'text-base',
      lg: 'text-lg',
      xl: 'text-xl',
      '2xl': 'text-2xl',
      '3xl': 'text-3xl',
      '4xl': 'text-4xl',
      '5xl': 'text-5xl',
      '6xl': 'text-6xl',
    },
  },
})

However, I still can't use placeholder:text-pink-500 in my className and the placeholder text still doesn't respect dark mode by default.