React-Date SingleDatePicker功能正常但默认样式丢失，如何解决？

我之前也碰到过一模一样的情况——功能都正常，就是日历的默认样式全没了，折腾了半天终于找到原因，给你几个靠谱的排查和解决方向：

• 第一步：务必引入react-dates的官方样式文件
  react-dates不会自动注入样式，必须手动导入它的CSS。你可以在项目的入口文件（比如index.js或者App.js）里直接加：

  import 'react-dates/lib/css/_datepicker.css';
  

  如果你的项目用SCSS，也可以在主样式文件里通过@import引入，记得加波浪号让Webpack去node_modules里找：

  @import '~react-dates/lib/css/_datepicker.css';
  

• 第二步：检查Webpack样式加载配置是否完整
  你提到已经用了css-loader，但光有它还不够——css-loader只是解析CSS，还需要style-loader（开发环境）或者mini-css-extract-plugin（生产环境）把CSS注入到页面中。比如开发环境的Webpack rules配置应该是这样：

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        // 重点：别把node_modules排除在外！如果有exclude规则，要给react-dates开特例
        exclude: /node_modules\/(?!react-dates)/,
      },
      // 如果用SCSS，还要加上sass-loader
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  }
  

  很多人会不小心把node_modules排除在loader处理之外，导致react-dates的CSS没被解析，这是最常见的坑！

• 第三步：排查版本兼容性问题
  确认你的react、react-dom版本和react-dates兼容。比如部分旧版react-dates需要react 16.x以上的版本，如果版本不匹配，也可能出现样式加载异常的情况。可以去package.json里核对一下版本号，必要时升级或降级适配。

• 第四步：检查是否有全局样式冲突
  如果项目里有全局CSS重置（比如normalize.css或者自定义的reset样式），可能会覆盖react-dates的默认样式。打开浏览器开发者工具，选中日历元素，看看它的样式是否被其他规则覆盖了。如果是，要么调整全局样式的优先级，要么给日历容器加个专属类，针对性修复样式。

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