React-day-picker: Styles are not loaded

Created on 24 Sep 2017 · 7Comments · Source: gpbl/react-day-picker

This seems like a really good alternative to react-datepicker cos it provides custom styling. However, a simple setup following the documentation does not work. The styles do not load. I'm using it with redux-form; the styling is just broken. Anyone else having this issue?

Source

adred

Most helpful comment

So when I added <link rel="stylesheet" href="https://unpkg.com/react-day-picker/lib/style.css"> in the <head> tag, it worked. Not sure what's happening.

adred on 24 Sep 2017

👍3

All 7 comments

Have you read this first? http://react-day-picker.js.org/docs/styling.html
If there’s something not clear, I’ll be happy to help!

gpbl on 24 Sep 2017

Yes I read that. The documentation is very clear actually but my implementation does not work.

import React, { Component } from 'react'
import DayPickerInput from 'react-day-picker/DayPickerInput'

import 'react-day-picker/lib/style.css'

class DateTextField extends Component {
  renderField ({ label }) {
    return (
      <div>
        <span>{label}</span>
        <DayPickerInput />
      </div>
    )
  }
  render () {
    const { name, label } = this.props

    return (
      <Field name={name} component={this.renderField} label={label} />
    )
  }
}

export default DateTextField

Any ideas?

adred on 24 Sep 2017

So when I added <link rel="stylesheet" href="https://unpkg.com/react-day-picker/lib/style.css"> in the <head> tag, it worked. Not sure what's happening.

adred on 24 Sep 2017

👍3

@adred I think there's a problem in the way you import CSS from JavaScript: