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',
    },
  ],
};

给你！希望对您有所帮助！

React-Date "SingleDatePicker" 没有按预期工作？

React-Date "SingleDatePicker" not working as expected?

reactjs

react-dates