How do I style materialui DateRangePicker with ThemeProvider?

Question

I'm trying to style the DateRangePicker. I would expect the element to show the dark mode but it's still showing the light mode.

This is the package that I'm using: https://github.com/jungsoft/materialui-daterange-picker/issues/5

If I try this fork it does work: https://github.com/nikhilgoud/materialui-daterange-picker

However that package has another problem. The disabled dates don't show up.

Is it not possible to style the DateRangePicker this way? Or Is there another way to style it?

    const theme = createTheme({
        palette: {
            // Dark Mode
            mode: 'dark',
            primary: {
              main: "#0057FF"
            },
        },
    });

    return (
        <StyledEngineProvider injectFirst>
            <ThemeProvider theme={theme}>
                <DateRangePicker
                    open={open}
                    toggle={() => {toggle()}}
                    onChange={(dateRange) => {onChange(dateRange)}}
                    maxDate={new Date(Date.now())}
                    wrapperClassName="w-max"
                    initialDateRange={initialDateRange}
                    />
            </ThemeProvider>
        </StyledEngineProvider>
    )

Answer 1

Just in case someone else is still looking for an answer.

Faced the same issue and found a working fork.

This package both picks up the MUI ThemeProvider styles and correctly displays disabled dates.

Installation:

npm install mui-daterange-picker

or with yarn

yarn add mui-daterange-picker