next.js react-datepicker样式未应用于已部署的版本

xkrw2x1b  于 2023-04-05  发布在  React
关注(0)|答案(5)|浏览(140)

我正在使用react-datepicker npm模块,当我部署构建时,它的样式被破坏了(样式没有被应用),它在本地环境中工作正常。
我导入了它的样式,如下所示:导入'react-datepicker/dist/react-datepicker.css';
我找到了一个可以进口的地方:import './../../node_modules/react-datepicker/dist/react-datepicker.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;

请帮助我,如果有人遇到这个问题或有一些想法。

8mmmxcuj

8mmmxcuj1#

通过以下方式添加其样式文件

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

u3r8eeie2#

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

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

在Next js中,如果要导入Library的css,请使用CDN

bvn4nwqk

bvn4nwqk3#

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

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

内联导入(在jsx/tsx内部)在开发环境中工作而不是在其他环境中工作的原因可能是因为在开发环境中你有extract_css: false(在config/webpacker.yml内部),而在其他环境中它被设置为true

1mrurvl1

1mrurvl14#

如果使用Next.js导入

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

在你的_app.js页面中,它会工作。

pinkon5k

pinkon5k5#

这些解决方案对我来说都不管用,最后我把react-datepicker.js添加到我的styles文件夹中,让它工作起来

相关问题