Theming

Your theme defines your brand, so use-date-input components are naked, with just minimal layout styles.

Instead use-date-input provides a comphrensive approach to theming, enabling you to replace, either the style or the component, for every use-date-input element.

Using the theme prop, go from the default styles

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 1 : 2
  return (
    <Calendar
      adapter={dateAdapter}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfColumns}
    />
  )
}

to this, with just one theme prop

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 1 : 2
  return (
    <Calendar
      adapter={dateAdapter}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfColumns}
      theme={sampleTheme}
    />
  )
}

Create Your Own Theme

Built upon styled-components each element of use-date-input is themable by overriding/etending the default style.

If you want to style the default components then create a new theme, using the theme prop.

// import { Calendar } from "@use-date-input/core";
// import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
const yourTheme = {
    AnimatedGroup: { /* Overidden component style */ },,
    AnimatedMonthGroup: {},
    Day: {},
    DayOfWeek: {},
    Header: {},
    MonthCell: {},
    MonthGroup: {},
    MonthTitle: {},
    Month: {},
    MonthHeader: {},
    NextButton: {},
    PreviousButton: {},
    Root: {},
    YearTitle: {},
    Week: {},
    WeekHeader: {},
    WeekRow: {},
};
function ThemedCalendar(props) {
    return (
        <Calendar
            adapter={dateAdapter}
            theme={yourTheme}
            {...props}
        />
    );
}

Refer to sampleTheme.js from the repo for a further example.

If using input components with the useDateInput/useDateRangeInput hooks, then simply style the elements yourself, before composing with Calendar.