React Native Paper Dates DatePickerInput模态框样式自定义求助

要修改DatePickerInput弹出的模态框文本颜色、选中日期背景色等样式，直接给DatePickerInput传theme属性通常不会生效——因为内部模态框和日期选择器组件是通过react-native-paper的上下文获取主题的，而非直接继承输入框的props。以下是两种可行方案：

方案1：用PaperProvider局部覆盖主题 #

在DatePickerInput外层包裹react-native-paper的PaperProvider，专门为这个组件设置独立主题，内部模态框会自动继承该主题样式：

import { Provider as PaperProvider } from 'react-native-paper';

// 你的组件内部
<PaperProvider
  theme={{
    colors: {
      primary: '#4E73DF',       // 选中日期的背景色、确认按钮颜色
      onPrimary: '#FFFFFF',     // 选中日期的文本颜色
      onSurface: '#333333',     // 模态框内普通文本（如月份、星期）颜色
      surface: '#FFFFFF',       // 模态框背景色
      backdrop: 'rgba(0, 0, 0, 0.5)', // 模态框遮罩层透明度/颜色
    },
  }}
>
  <DatePickerInput
    activeUnderlineColor="#4E73DF"
    iconColor="#4E73DF"
    locale="en"
    label="Date de début"
    style={{ backgroundColor: "white" }}
    value={inputDate}
    onChange={(d) => setInputDate(d)}
    inputMode="start"
  />
</PaperProvider>

方案2：通过datePickerProps传递自定义样式 #

部分版本的react-native-paper-dates支持通过datePickerProps给内部的日期选择器组件传递主题或样式，直接控制选中日期、文本的样式：

<DatePickerInput
  activeUnderlineColor="#4E73DF"
  iconColor="#4E73DF"
  locale="en"
  label="Date de début"
  style={{ backgroundColor: "white" }}
  value={inputDate}
  onChange={(d) => setInputDate(d)}
  inputMode="start"
  // 传递给内部日期选择器的props
  datePickerProps={{
    theme: {
      colors: {
        primary: '#4E73DF',
        onPrimary: '#fff',
        onSurface: '#333',
      },
    },
    // 自定义日期单元格的样式（可选）
    dayStyle: (date, selected) => ({
      backgroundColor: selected ? '#4E73DF' : 'transparent',
      borderRadius: 8, // 可选：调整选中日期的圆角
      color: selected ? '#fff' : '#333',
    }),
  }}
/>

注意事项 #

• 确保react-native-paper和react-native-paper-dates版本兼容，部分旧版本可能需要使用calendarTheme替代theme参数。
• 如果需要修改模态框的容器样式，可以尝试通过modalProps传递style属性，比如调整模态框的宽度、内边距等。

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