React-Datepicker完全不显示求助（组件尺寸为0x0）

问题根源分析 #

你的代码里存在两个关键问题：

1. 重复导入冲突的CSS文件：同时导入了react-datepicker.css和react-datepicker-cssmodules.css，这两个样式文件互斥——后者是给使用CSS Modules的项目准备的，普通项目只需要前者，重复导入会导致样式被异常覆盖，组件失去渲染尺寸。
2. portalId属性未对应实际DOM节点：你设置了portalId="unique-root"，但页面中没有这个id的DOM元素，导致日期选择器的弹窗无法正确挂载，进而影响组件显示。

具体修复步骤 #

1. 清理重复的CSS导入 #

删除import 'react-datepicker/dist/react-datepicker-cssmodules.css';这一行，只保留标准样式导入：

import "react-datepicker/dist/react-datepicker.css";

2. 处理portalId属性 #

两种选择：

• 不需要portal的情况：直接移除portalId="unique-root"属性，让组件默认挂载在当前DOM节点下。
• 需要portal的情况：在项目的public/index.html中添加一个对应id的空DOM节点，比如在<body>里加：

<div id="unique-root"></div>

3. 检查全局样式干扰 #

如果以上操作后仍不显示，检查是否有全局CSS设置了* { display: none; }或者类似的重置样式，覆盖了datepicker的默认样式。可以给DatePicker组件添加自定义类名，强制设置基础样式：

<DatePicker
  className="custom-datepicker"
  placeholderText="abc123"
  selected={startDate}
  onChange={(date) => setStartDate(date)}
/>

对应的CSS：

.custom-datepicker {
  display: block;
  width: 100%;
  padding: 0.5rem;
}

修正后的完整代码示例 #

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function DateTest(props) {
    const [startDate, setStartDate] = useState(new Date());  

    return (
        <div style={{width: "20em", height: "20em"}}>
            <DatePicker
                placeholderText="abc123"
                selected={startDate}
                onChange={(date) => setStartDate(date)}
            />
        </div>
    );
}

内容的提问来源于stack exchange，提问作者pls-help-me