Can't style input notch from select component

[Nurai1]

In docs it is written that we can pass classes by the same data attributes like for the input.
https://tailwind-elements.com/docs/standard/forms/select

But in code below
<select id={id} ref={handleReferenceChange} value={selected?.value} onChange={handleChange} disabled={disabled} data-te-select-init data-te-class-select-input={twMerge( "peer block w-full rounded border-0 bg-transparent outline-none transition-all ease-linear duration-200 focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0 cursor-pointer data-[te-input-disabled]:bg-secondary-100 data-[te-input-disabled]:cursor-default group-data-[te-was-validated]/validation:mb-4", "min-h-[44px] text-secondary-900" )} data-te-class-select-arrow-default="w-5 right-3 top-0 bottom-0 flex justify-center items-center" data-te-class-select-label-size-default="leading-[1.6] translate-y-[0.6rem] data-[te-input-state-active]:-translate-y-[0.4rem]" data-te-class-select-arrow="absolute text-[0.8rem] cursor-pointer peer-focus:text-primary-700 peer-data-[te-input-focused]:text-primary-700 group-data-[te-was-validated]/validation:peer-valid:text-green-600 group-data-[te-was-validated]/validation:peer-invalid:text-[rgb(220,76,100)]" data-te-class-notch-leading-normal={twMerge( "border-secondary-200 group-data-[te-input-focused]:border-2 group-data-[te-input-focused]:border-primary-700" )} data-te-class-notch-middle-normal={twMerge( "border-secondary-200 group-data-[te-input-focused]:border-2 group-data-[te-input-focused]:border-primary-700" )} data-te-class-notch-trailing-normal={twMerge( "border-secondary-200 group-data-[te-input-focused]:border-2 group-data-[te-input-focused]:border-primary-700" )} >

Lines which starts with 'data-te-class-notch' do not pass classes to notch as states in the doc.

[juujisai]

Hi! I created a new react app, passed your code and the classes were changed for me:

Notches get styles from, for example: notchLeading + notchLeadingNormal (notchLeadingWhite or if you picked the form white) etc. Did your component not change classes at all?

Although it worked in my case with twMerge aswell, maybe try passing the classes without this method and see if that helps.

[Nurai1]

Thank you for the answer.

That's what u write in your code? I try to get why it is not working for me

[juujisai]

Thats basically what I added. I just changed the colors to red to see the changes better. Try my code and see if anything changes. You can also try to create a fresh app with use of our tutorial and see if you can't still change colors:

Code:

import { useEffect } from "react";
import { Select, Input, initTE } from "tw-elements";
import { twMerge } from "tailwind-merge";

function App() {
  useEffect(() => {
    initTE({ Select, Input });
  }, []);

  return (
    <div className="m-10 ">
      <select
        data-te-select-init
        data-te-class-select-input={twMerge(
          "peer block w-full rounded border-0 bg-transparent outline-none transition-all ease-linear duration-200 focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0 cursor-pointer data-[te-input-disabled]:bg-secondary-100 data-[te-input-disabled]:cursor-default group-data-[te-was-validated]/validation:mb-4",
          "min-h-[44px] text-secondary-900"
        )}
        data-te-class-select-arrow-default="w-5 right-3 top-0 bottom-0 flex justify-center items-center"
        data-te-class-select-label-size-default="leading-[1.6] translate-y-[0.6rem] data-[te-input-state-active]:-translate-y-[0.4rem]"
        data-te-class-select-arrow="absolute text-[0.8rem] cursor-pointer peer-focus:text-primary-700 peer-data-[te-input-focused]:text-primary-700 group-data-[te-was-validated]/validation:peer-valid:text-green-600 group-data-[te-was-validated]/validation:peer-invalid:text-[rgb(220,76,100)]"
        data-te-class-notch-leading-normal={twMerge(
          "border-[red] group-data-[te-input-focused]:border-2 group-data-[te-input-focused]:border-red-600"
        )}
        data-te-class-notch-middle-normal={twMerge(
          "border-[red] group-data-[te-input-focused]:border-2 group-data-[te-input-focused]:border-red-600"
        )}
        data-te-class-notch-trailing-normal={twMerge(
          "border-[red] group-data-[te-input-focused]:border-2 group-data-[te-input-focused]:border-red-600"
        )}
      >
        <option value="" hidden></option>
        <option value={"First"}>First</option>
      </select>
      <label data-te-select-label-ref>Example label</label>
    </div>
  );
}

export default App;

Tutorial:
https://tailwind-elements.com/docs/standard/integrations/react-integration/

[Nurai1]

@juujisai
Geez, the problem was with tailwind-elements version.
I used the 1.0.0-beta2 and it is broken there. Thank you for help by the way!