reactjs - React-Date“SingleDatePicker”没有按预期工作？

Question

我正在使用 react-dates 并尝试实现 singledatepicker。所有功能都在工作，但我不知道为什么所有默认样式都消失了。我也在使用 babel "transform-class-properties"

import React from 'react';
import moment from 'moment'
import 'react-dates/initialize';
import {SingleDatePicker} from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

const now= moment();
export default class ExpenseForm extends React.Component{
    state={
        description:'',
        note:'',
        amount:'',
        createdAt:moment(),
        calendarFocused:false
    }

    onDateChange = (createdAt)=>{
        this.setState(()=>({createdAt}));
    }
    onFocusChange =({focused})=>{
        this.setState(()=>({calendarFocused:focused}))
    }
    render(){
        return(
            <div>
                <h3>ExpenseForm</h3>
                <form>
                    <SingleDatePicker
                        date={this.state.createdAt}
                        onDateChange={this.onDateChange}
                        focused={this.state.calendarFocused}
                        onFocusChange={this.onFocusChange}
                    />
                </form>
            </div>
        )
    }
}

这是我的 Webpack 配置文件，它是用 css-loader 加载的

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },{
          test: /\.s?css$/,
          use:['style-loader','css-loader','sass-loader']
      }
    ]
},
devtool:'cheap-module-eval-source-map',
devServer:{
  contentBase:path.resolve(__dirname, 'public'),
  historyApiFallback:true
}
};

Answer 1

将 react-dates 集成到我的项目中时，我遇到了完全相同的问题，我认为根本原因是您项目中的 css 模块还编译了 react-dates 的 css，导致样式丢失。要解决此问题，您可以修改模块中的规则，例如：

...your original css module rule
exclude: [
  /node_modules/
]

应用此规则后，您可能会遇到另一个问题，即这些 css 文件由于被排除在外而无法正确处理，然后您应该添加另一个 css 模块来处理您不想弄乱的那些 css 文件，例如例子：

exports.vendorCss = {
  test:    /\.(css|scss|sass)$/,
  include: [/node_modules/],
  loaders: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'sass-loader',
    },
  ],
};

你有它！希望这可以帮助！