我正在使用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;
请帮助我,如果有人遇到这个问题或有一些想法。
5条答案
按热度按时间8mmmxcuj1#
通过以下方式添加其样式文件
u3r8eeie2#
你可以用CDN,来解决这个问题
在Next js中,如果要导入Library的css,请使用CDN
bvn4nwqk3#
我必须导入
application.scss
中的样式内联导入(在jsx/tsx内部)在开发环境中工作而不是在其他环境中工作的原因可能是因为在开发环境中你有
extract_css: false
(在config/webpacker.yml
内部),而在其他环境中它被设置为true
。1mrurvl14#
如果使用Next.js导入
在你的_app.js页面中,它会工作。
pinkon5k5#
这些解决方案对我来说都不管用,最后我把react-datepicker.js添加到我的styles文件夹中,让它工作起来