Unable to Override Background Color via className Prop on Input Component

[NPJigaK]

I am facing an issue where specifying a background color via the className prop on the Input component from @material-tailwind/react does not reflect the specified color.

Here's a snippet of how I am using the component:

<Input
  label="Search..."
  className={"bg-black"}
/>

Upon inspecting the DOM, I observed that the class bg-black is indeed being applied:

class="peer w-full h-full bg-transparent text-blue-gray-700 ... bg-black"

However, despite bg-black appearing after bg-transparent, the background color remains as specified by bg-transparent. I'd expect bg-black to override the background color as it's specified later in the class string.

[maisamaf]

Hey @NPJigaK, You can use the important! modifier on the className to override the existing class. For instance:

<Input
  label="Search..."
  className="!bg-black"
/>

[NickEsColR]

In my case i want to apply the background only to the label but using the className inside labelProps overrides the borders too