未在部署的生成上应用react-datepicker样式

Question

我使用的是react datepicker npm模块，它的样式被破坏了（没有应用样式），当我部署构建时，它在本地环境中运行良好。

我已经像这样导入了它的样式：import'react datepicker/dist/react datepicker。css'；

我找到了这样导入的地方：导入“//节点\模块/react日期选择器/dist/react日期选择器。css'；

它也不起作用。

我认为这可能是因为SSR的原因，所以我删除了这个组件的SSR，但也没有CSR的运气。

当前结果

期望结果

这是我的组件代码：

 import React from 'react';
 import DatePicker from 'react-datepicker';

 import calendarIcon from './../../assets/images/calendar-icon.svg';

 import 'react-datepicker/dist/react-datepicker.css';
 // import 'react-datepicker/dist/react-datepicker-cssmodules.min.css';
 import './Datepicker.scss';

 const Datepicker = ({ datepickerClassName, datepickerStyle, 
 selectedDate, datepickerInputClassName, handleChange }) => (
       <div className={`datepicker d-flex align-center 
           ${!!datepickerClassName ? datepickerClassName : ''}`}
           style= {datepickerStyle}
       >
       <span className='d-flex align-center icon-container'>
           <img src={calendarIcon} className='icon' />
       </span>

       <DatePicker
            placeholderText='DD/MM/YYYY'
            dateFormat='dd/MM/yyyy'
            id='start-date'
            autoComplete='off'
            selected={selectedDate}
            className={datepickerInputClassName}
            onChange={handleChange}
        />
    </div>
);

export default Datepicker;

如果有人面临这个问题或对此有一些想法，请帮助我。

Answer 1

我必须在应用程序中导入样式。scss

@import 'react-datepicker/dist/react-datepicker';

内联导入（在jsx/tsx内部）在dev中工作而不是在其他环境中工作的原因可能是因为在dev中您有extract\u css:false（在config/webpacker.yml）并且在其他环境中它被设置为true。

Answer 2

添加其样式文件

import 'react-datepicker/dist/react-datepicker.css'

Answer 3

您可以使用CDN来解决这个问题

 <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css" />

在下一个js中，如果要导入库的css，请使用CDN