我正在使用 react-datepicker npm 模块,当我部署构建时,它的样式被破坏(未应用样式),它在本地环境中运行良好。
我已经像这样导入了它的样式:
导入'react-datepicker/dist/react-datepicker.css';
我找到了可以像这样导入的地方:
导入'./../../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;
如果有人遇到这个问题或对此有一些想法,请帮助我。
最佳答案
你可以使用CDN,来解决这个问题
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css" />
在 Next js 中,如果要导入库的 css,请使用 CDN
关于javascript - react-datepicker 样式未应用于已部署的构建,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58955113/