themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.82k stars 406 forks source link

`<Datepicker>` Theme docs missing keys #1210

Open yzidanNqood opened 7 months ago

yzidanNqood commented 7 months ago

Using the Theme here:https://www.flowbite-react.com/docs/components/datepicker#theme

i managed to change the UI of the Calendar but i cannot control the Input itself

tulup-conner commented 7 months ago

Hi there, I don't think it's in the documentation (that's a bug) but you can alter the theme for the <input> itself: https://github.com/themesberg/flowbite-react/blob/main/src/components/Datepicker/Datepicker.tsx#L31

<Datepicker theme={{
  root: {
    input: "bg-pink-800"
  }
}} />

You can also use className if you find it easier:

<Datepicker className="[&_input]:bg-pink-800" />

I'm updating your issue to point out that we can't see this root.input key in the Datepicker Theme docs. Not sure why that's happening.

yzidanNqood commented 7 months ago
className="[&_input]:bg-pink-800"

the

<Datepicker theme={{
  root: {
    input: "bg-pink-800"
  }
}} />

is not working but using the className is working