Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

datepicker styles are not loaded - class="undefined" #38

Open
donomron opened this issue Oct 3, 2017 · 6 comments
Open

datepicker styles are not loaded - class="undefined" #38

donomron opened this issue Oct 3, 2017 · 6 comments

Comments

@donomron
Copy link

donomron commented Oct 3, 2017

There seems to be some issue with loading css modules. I'm importing react-persian-datepicker as follows:

import { DatePicker } from 'react-persian-datepicker';

and I'm using <DatePicker/> is my component.
I'm also using css-loader and style-loader as stated in the docs:

Note that you need css-loader for /.css$/ files enabled to have the styles working as we use css modules to put classnames in place.

my webpack config module section:

{
  test: /\.css$/,
  exclude: /node_modules/,
  loader: 'style-loader!css-loader?modules&importLoaders=1',
},
{
  test: /\.css$/,
  include: /node_modules/,
  loader: 'style-loader!css-loader',
},

Any idea how to fix this?
@donomron
Copy link
Author

donomron commented Oct 3, 2017

I've figured out that styles are loaded correctly in <head>, but class names of datepicker component are all undefined

@htondkar
Copy link

htondkar commented Oct 4, 2017

you can use this package instead
https://www.npmjs.com/package/react-persian-calendar

@basir
Copy link

basir commented Jun 13, 2018 •
edited
Loading

Fix it like this:

const styles= {
    calendarContainer: 'calendarContainer',
    dayPickerContainer: 'dayPickerContainer',
    monthsList: 'monthsList',
    daysOfWeek: 'daysOfWeek',
    dayWrapper: 'dayWrapper',
    selected: 'selected',
    heading: 'heading'
}
      <DatePicker calendarStyles={styles}/>

@soroushoracle
Copy link

@basir
Thank you for your help.
my problem solved.
Duplicate of #

@asiye
Copy link

asiye commented Aug 1, 2018

const styles= {
calendarContainer: 'calendarContainer',
dayPickerContainer: 'dayPickerContainer',
monthsList: 'monthsList',
daysOfWeek: 'daysOfWeek',
dayWrapper: 'dayWrapper',
selected: 'selected',
heading: 'heading',
next:'next',
prev:'prev',
title:'title',
}
<Calendar styles={ styles } />
<DatePicker calendarStyles={ styles } />

@hamed98
Copy link

hamed98 commented Apr 4, 2019

i complete @asiye comment :
const styles= {
currentMonth: 'currentMonth',
calendarContainer: 'calendarContainer',
dayPickerContainer: 'dayPickerContainer',
monthsList: 'monthsList',
daysOfWeek: 'daysOfWeek',
dayWrapper: 'dayWrapper',
selected: 'selected',
heading: 'heading',
next:'next',
prev:'prev',
title:'title',
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@basir @asiye @donomron @soroushoracle @htondkar @hamed98