CODEWITHSUNDEEP
javascriptreactjsnext.jsreact-datepicker
Jappreet
Jappreet

Reputation: 377

react-datepicker styles are not being not applied on deployed build

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.

Upvotes: 28

Views: 31396

Answers (5)

James Goodheart
James Goodheart

Reputation: 9

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

Upvotes: 0

Diego Braga
Diego Braga

Reputation: 221

if you are using Next.js import

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

inside your _app.js page it will work.

Upvotes: 5

saeed eivazi
saeed eivazi

Reputation: 914

Add its style file by

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

Upvotes: 23

ndnenkov
ndnenkov

Reputation: 36100

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.

Upvotes: 12

Clement Olaniyan
Clement Olaniyan

Reputation: 423

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

Upvotes: 16

Related Questions