Skip to content

Unable to style day cell #962

@t-zander

Description

@t-zander

Describe the bug
I am unable to style date cell, in any way. I've used modifiersStyles.
I need it because for some reason I have white color of days and white background on hover.
As far I got it, I can use any of these

Here is the code:

const styles = {
    today: {
      color: theme.palette.primary.dark // it comes from MUI react (I haven't found any clear way to combine their makeStyles utility with react-day-picker
    },
    selected: {
      backgroundColor: theme.palette.primary.main
    },
    day: {
      color: "red" // doesn't work
    }
  };

<DayPicker
        selectedDays={selectedDays}
        onDayMouseEnter={handleDayMouseEnter}
        onDayClick={handleDayClick}
        numberOfMonths={2}
        months={MONTHS}
        weekdaysLong={WEEKDAYS_LONG}
        weekdaysShort={WEEKDAYS_SHORT}
        firstDayOfWeek={1}
        modifiersStyles={styles}
      />

To Reproduce
https://codesandbox.io/s/react-day-picker-base-8b440

Expected behavior
Screenshots
https://prnt.sc/q4o2bq
Additional context
I am on Next.js
I am using material-ui react
No css modules, only MUI tool called makeStyles()

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugBug or Bug fixes

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions