27

I'm using the react-datepicker npm module and its styles got broke (styles are not being applied) when I deploy the build, it's working fine in the local environment.

I've imported its styles like this: import 'react-datepicker/dist/react-datepicker.css';

I found somewhere to import like this: import './../../node_modules/react-datepicker/dist/react-datepicker.css';

It's also not working.

I thought this could be the reason because of SSR so I removed SSR for this component but had no luck with CSR as well.

Current Result

enter image description here

Desired Result

enter image description here

Here is my Component code:

 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;

Please help me with this if someone faced this issue or has some idea about this.

First Arachne
  • 786
  • 1
  • 8
  • 18
Jappreet
  • 368
  • 1
  • 3
  • 8
  • Your current and desired results did not import. Could you please edit them in? – NegativeFriction Nov 20 '19 at 13:10
  • Why don't you post your code, its seems that some datepicker classes are missing – Muhammad Nov 20 '19 at 13:12
  • it's not showing as I'm new. @NegativeFriction – Jappreet Nov 20 '19 at 13:15
  • 1
    Looks like this has been addressed on the github. https://github.com/Hacker0x01/react-datepicker/issues/879 There's one solution very similar to what you've tried, but slightly different. Looks like there are two or three other solutions suggested. – NegativeFriction Nov 20 '19 at 13:21
  • added code, please check @Muhammad – Jappreet Nov 20 '19 at 13:31
  • 1
    @NegativeFriction, worked when I import css via "require" instead using "import", but what's the reason behind it didn't worked through import, and also is it correct now to import css via "require"? – Jappreet Nov 20 '19 at 13:38
  • Most likely this is a version issue. Older browsers can have issues with the import method, even if you are using something like babel to protect against these issues. I'm not fully versed in it admittedly, but here's another stack overflow thread from people who know more than me: https://stackoverflow.com/questions/46677752/the-difference-between-requirex-and-import-x – NegativeFriction Nov 20 '19 at 17:34
  • 1
    @NegativeFriction, Thanks a lot for the quick responses and guiding me towards right direction to fix the issue. – Jappreet Nov 21 '19 at 07:17

5 Answers5

19

Add its style file by

import 'react-datepicker/dist/react-datepicker.css'
saeed eivazi
  • 818
  • 1
  • 7
  • 14
15

You can use CDN, to solve the issue

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

In Next js, if you want to import css of a Library, use the CDN

Clement Olaniyan
  • 333
  • 2
  • 11
12

I had to import the styling inside application.scss

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

The reason the inline import (inside jsx/tsx) works in dev and not other environments is likely because in dev you have extract_css: false (inside config/webpacker.yml) and in other environments it's set to true.

ndnenkov
  • 35,425
  • 9
  • 72
  • 104
4

if you are using Next.js import

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

inside your _app.js page it will work.

Diego Braga
  • 161
  • 11
0

None of these solutions worked for me. I ended up getting it working by adding react-datepicker.js to my styles folder

James Goodheart
  • 1