React Native Web中react-native-paper-dates日期选择器模态框配色定制问题

问题 #

我正在基于Web开发React Native项目，使用react-native-paper-dates组件实现DatePickerInput，目前已成功定制日期输入框的配色，但无法修改弹出的日期选择器模态框的颜色。

实现代码 #

import { View } from '@gluestack-ui/themed'
import React from 'react'
import { DatePickerInput } from 'react-native-paper-dates'
import { CalendarDate } from 'react-native-paper-dates/lib/typescript/Date/Calendar'
import { SafeAreaProvider } from 'react-native-safe-area-context'

const DatePicker = ({ amountOfMonths = 3 }: { amountOfMonths?: number }) => {
    const [inputDate, setInputDate] = React.useState<CalendarDate>()
    
    return (
        <SafeAreaProvider>
            <View>
                <DatePickerInput
                    placeholder="XX/XX/XXXX"
                    placeholderTextColor={appliedColors.inputPlaceholderColor}
                    endYear={new Date().getFullYear() + 1}
                    startWeekOnMonday
                    iconColor={colors.darkCantaloupeGreen}
                    activeOutlineColor={colors.darkCantaloupeGreen}
                    selectionColor={colors.darkCantaloupeGreen}
                    textColor={colors.darkCantaloupeGreen}
                    outlineColor={appliedColors.inputBorderColor}
                    locale="en"
                    value={inputDate}
                    onChange={(d) => setInputDate(d)}
                    inputMode="start"
                    validRange={{
                        startDate: new Date(),
                        endDate: new Date(
                            new Date().setMonth(
                                new Date().getMonth() + amountOfMonths
                            )
                        ),
                    }}
                />
            </View>
        </SafeAreaProvider>
    )
}

export default DatePicker

当前问题细节 #

• 尝试了所有名称带“...Color”的属性以及theme属性，查阅了所有能找到的类型声明，均未生效
• 已知同类Android端问题在Stack Overflow无有效解答
• 需要修改模态框的primary主色调

当前效果 #

• 输入框配色已生效（自定义深哈密瓜绿）
• 弹出的模态框仍使用默认主色调，未跟随输入框配色

解决方案 #

方法1：通过react-native-paper全局主题覆盖 #

react-native-paper-dates依赖react-native-paper的主题系统，可通过全局PaperProvider覆盖模态框主色调：

import { Provider as PaperProvider } from 'react-native-paper';
// ...其他导入

const customTheme = {
  colors: {
    primary: colors.darkCantaloupeGreen, // 你的自定义主色调
    // 可按需覆盖background、text等其他颜色
  },
};

const DatePicker = ({ amountOfMonths = 3 }: { amountOfMonths?: number }) => {
    const [inputDate, setInputDate] = React.useState<CalendarDate>()
    
    return (
        <SafeAreaProvider>
            <PaperProvider theme={customTheme}>
                <View>
                    <DatePickerInput
                        // ...你的现有属性
                    />
                </View>
            </PaperProvider>
        </SafeAreaProvider>
    )
}

方法2：通过modalProps局部自定义样式 #

若不想全局覆盖，可通过DatePickerInput的modalProps传递自定义样式，直接修改模态框及日历头部配色：

<DatePickerInput
    // ...你的现有属性
    modalProps={{
        theme: {
            colors: {
                primary: colors.darkCantaloupeGreen,
            },
        },
    }}
    headerStyle={{ backgroundColor: colors.darkCantaloupeGreen }}
    headerTextColor="#fff"
/>

方法3：Web端专属CSS类覆盖 #

因为是Web开发，可通过CSS全局覆盖组件生成的DOM类（类名需以浏览器开发者工具实际检测为准）：

/* 覆盖模态框头部背景 */
.rnp-dates-modal .rnp-dates-header {
    background-color: #你的深哈密瓜绿;
}

/* 覆盖选中日期背景 */
.rnp-dates-modal .rnp-dates-day--selected {
    background-color: #你的深哈密瓜绿;
}

/* 确认按钮文字颜色 */
.rnp-dates-modal .rnp-dates-button--confirm {
    color: #你的深哈密瓜绿;
}

内容的提问来源于stack exchange，提问作者Etan J