如何使用 ThemeProvider 设置 materialui DateRangePicker 的样式？

Question

我正在尝试设置 DateRangePicker 的样式。我希望元素显示暗模式，但它仍然显示亮模式。

这是我正在使用的包：https://github.com/jungsoft/materialui-daterange-picker/issues/5

如果我尝试这个叉子，它确实有效： https://github.com/nikhilgoud/materialui-daterange-picker

但是那个包还有另一个问题。禁用日期不显示。

不能这样设置 DateRangePicker 的样式吗？或者还有其他样式吗？

    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

以防万一其他人仍在寻找答案。

面对同样的问题，找到了一个有效的fork。

这个包既选择了 MUI ThemeProvider 样式又正确显示了禁用日期。

安装：

npm install mui-daterange-picker

或纱线

yarn add mui-daterange-picker