React项目中MantineUI DateInput组件日历弹窗样式自定义异常问题

嘿，我看你在Mantine UI的DateInput组件上遇到了弹窗对齐和文字样式的问题，这俩坑我之前折腾Mantine的时候也踩过，给你分享下我当时的解决思路，应该能帮到你：

一、解决日历弹窗偏移/不对齐的问题 #

你当前用dropdownProps={{ style: { backgroundColor: 'white', } }}调整弹窗样式，但Mantine的Dropdown组件有内置的定位逻辑，直接改style可能覆盖不了默认规则，试试这两种方法：

1. 通过dropdownProps的定位属性强制对齐
   在dropdownProps里明确弹窗的位置、对齐方式，还可以加上withinPortal: true让弹窗脱离父组件（比如你的Grid.Col）的布局限制，避免父组件的padding/定位影响：

   dropdownProps={{
     withinPortal: true, // 弹窗挂载到body下，脱离父组件布局
     position: 'bottom', // 固定弹窗在输入框下方
     align: 'center', // 让弹窗和输入框居中对齐
     gutter: 8, // 弹窗与输入框的间距，可按需调整
     style: { backgroundColor: 'white' }
   }}
   

2. 检查全局样式冲突
   要是还是不对齐，打开浏览器开发者工具（F12），选中弹窗元素，查看它的left/top属性是不是被项目的全局CSS（比如body、全局div的margin/padding）覆盖了，临时注释掉可疑的全局样式就能验证。

二、解决日历内文字颜色不生效的问题 #

你在DateInput的styles里写了一堆color: '#000000 !important'但没生效，核心原因是：DateInput的styles属性只负责控制输入框和外层容器，内部的Calendar组件样式需要通过calendarProps传递，而不是直接写在DateInput的styles里！

正确的样式传递方式 #

把原本写在DateInputstyles里的日历相关样式，全部移到calendarProps.styles中：

<DateInput
  // 其他属性保持不变
  // 只保留输入框自身的样式
  styles={{
    input: { color: '#000000 !important' }
  }}
  // 日历组件的样式通过calendarProps传递
  calendarProps={{
    styles: {
      headerControl: { color: '#000000 !important' },
      header: { color: '#000000 !important', justifyContent: 'center' },
      weekday: { color: '#000000 !important' },
      day: { color: '#000000 !important', fontSize: 'var(--mantine-font-size-sm)', padding: 'var(--mantine-spacing-xs)' },
      month: { color: '#000000 !important' },
      year: { color: '#000000 !important' },
      pickerControl: { color: '#000000 !important' },
      pickerControlActive: { color: '#000000 !important' },
    }
  }}
  // 弹窗定位配置
  dropdownProps={{
    withinPortal: true,
    position: 'bottom',
    align: 'center',
    style: { backgroundColor: 'white' }
  }}
/>

要是还是有个别样式不生效，用开发者工具查看对应元素的样式，看哪个类选择器的优先级更高，再针对性地调整（比如用更具体的类名，或者保留!important）。

整合后的完整代码示例 #

把上面的修改整合到你的代码中，最终版本如下：

<Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
  <DateInput
    label="Date of Check"
    placeholder="Select Date"
    {...form.getInputProps('dateOfCheck')}
    valueFormat="DD/MM/YYYY"
    rightSection={<IconCalendar size={16} />}
    // 仅控制输入框样式
    styles={{
      input: { color: '#000000 !important' }
    }}
    // 日历内部样式通过calendarProps传递
    calendarProps={{
      styles: {
        headerControl: { color: '#000000 !important' },
        header: { color: '#000000 !important', justifyContent: 'center' },
        weekday: { color: '#000000 !important' },
        day: { color: '#000000 !important', fontSize: 'var(--mantine-font-size-sm)', padding: 'var(--mantine-spacing-xs)' },
        month: { color: '#000000 !important' },
        year: { color: '#000000 !important' },
        pickerControl: { color: '#000000 !important' },
        pickerControlActive: { color: '#000000 !important' },
      }
    }}
    // 修复弹窗对齐的配置
    dropdownProps={{
      withinPortal: true,
      position: 'bottom',
      align: 'center',
      style: { backgroundColor: 'white' }
    }}
  />
</Grid.Col>

你可以先试试添加calendarProps，文字颜色应该就能正常生效了；再调整dropdownProps的定位属性解决弹窗偏移问题。如果还有小细节不对，用开发者工具定位具体元素的样式，针对性调整就好。

内容来源于stack exchange