How to use theme for hooks ? about use-date-input

[mark-tate]

Hello PentolBakso

Your so close, with this code.
You just need to move the theme to CalendarProvider like so.
Can you try that and let me know if it gives you what you want ?

    <>
      <input className="input" {...getInputProps({ onChange: handleInputChange })} value={date} />
      <CalendarProvider
        {...getCalendarProviderProps({
          adapter: dateAdapter,
          onCalendarChange: handleCalendarChange,
          theme: calendarTheme
        })}
      >
        <Popper {...getPopperProps({ placement: 'bottom-start' })}>
          <Box>
            <Calendar />
          </Box>
        </Popper>
      </CalendarProvider>
    </>

The reason being is that we can use Calendar on it's own without defining a CalendarProvider.
For instance, you might have an inline Calendar that is not associated with any input.
When you do this, then Calendar renders it's own CalendarProvider internally, so that children of the Calendar can use the various other hooks. It also keeps the code simple for the most basic of use cases.

However, if you are using with an input, then Calendar might not be the only child in your Popper that needs to access the hooks. (If you want an example of this, then have a look at the custom panel examples)
So, CalendarProvider provides the props to Calendar and any other child that asks for them.
Rather than have props in two places, then in this instance, the Calendar gets it's props from CalendarProvider, via the useCalendarProps hook.

I'll look at updating the docs, to make this clearer.

Thanks for asking this, it made my day to see that someone is using the code.

[pentolbakso]

Awesome..now it's working. Just as you stated above.

Keep up the good works. Give it some time.
People will start noticing your library and use it.

Thanks