shadcn/ul - Select 컴포넌트의 placeholder 색상 변경

https://github.com/shadcn-ui/ui/issues/574

Placeholder color in Select component not as expected. · Issue #574 · shadcn-ui/ui

 

<Select onValueChange={(v) => setValue("publicTag", v)}>
    <SelectTrigger className="data-[placeholder]:text-slate-400">
      <SelectValue placeholder="대표 해시태그" />
    </SelectTrigger>
    <SelectContent>
      {PUBLIC_TAGS.map((p) => (
        <SelectItem key={p} value={p}>
          {p}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>

시도 해본 것 :

• selectValue의 className에 placeholoder: 색상 을 부여했지만 안먹힘
• selectTrigger의 className에 placeholoder: 색상 을 부여했지만 안먹힘

깃 이슈를 통해 SelectTrigger의 className에 data-[placeholoder]를 통해 색상 부여해야 하는 걸 알게 됨.