react-datepicker 样式未应用于已部署的构建

Posted 2023-02-22

【中文标题】react-datepicker 样式未应用于已部署的构建

【英文标题】：react-datepicker styles are not being not applied on deployed build

【发布时间】：2020-03-16 05:11:24

【问题描述】：

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

我已经像这样导入了它的样式： 导入'react-datepicker/dist/react-datepicker.css';

我找到了可以像这样导入的地方： 导入'./../../node_modules/react-datepicker/dist/react-datepicker.css';

它也不起作用。

我认为这可能是 s-s-r 的原因，所以我删除了这个组件的 s-s-r，但 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;

如果有人遇到此问题或对此有一些想法，请帮助我。

【问题讨论】：

您当前和期望的结果没有导入。你能编辑它们吗？

你为什么不发布你的代码，它似乎缺少一些日期选择器类

看起来这个问题已经在 github 上解决了。 github.com/Hacker0x01/react-datepicker/issues/879 有一种解决方案与您尝试过的非常相似，但略有不同。看起来还有两三个其他解决方案建议。

@NegativeFriction，当我通过“require”而不是使用“import”导入css时工作，但它背后的原因是什么没有通过导入工作，现在通过“导入css也是正确的”需要”？

@NegativeFriction，非常感谢您的快速回复并指导我朝着正确的方向解决问题。

【参考方案1】：

如果您使用 Next.js 导入

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

在你的 _app.js 页面中它会起作用。

【参考方案2】：

添加其样式文件

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

【参考方案3】：

我必须在 application.scss 中导入样式

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

内联导入（在 jsx/tsx 中）在 dev 而不是其他环境中起作用的原因可能是因为在 dev 中您有 extract_css: false（在 config/webpacker.yml 中），而在其他环境中它设置为 true。

【参考方案4】：

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

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

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