search

davidtran / react-google-flight-datepicker

React date picker inspired by Google Flight
MIT License
386 stars 48 forks source link

Height provided by custom class does not change the height of the input component. #8

Closed sainiankit closed 4 years ago

sainiankit commented 4 years ago

I'm having trouble changing the height of the date inputs.

Inputs have a default height of 56px.

Screenshot 2020-06-16 at 11 35 03 PM

Changing the height via a custom class does not change the being of inputs.

Screenshot 2020-06-16 at 11 35 16 PM Screenshot 2020-06-16 at 11 39 57 PM

This is probably the best date range picker I have seen in years. ❤️

davidtran commented 4 years ago

Thanks @sainiankit , I will check this issue :)

felix-le commented 4 years ago

@sainiankit : hello, Would you like check it again? last time I checked, it worked normally. Btw, you should check follow:

  1. Try to call two class seletors instead of only one.
  2. import custom file scss after import lib. You can check my example here: https://codesandbox.io/s/thirsty-fast-u6r41?file=/src/App.js Screen Shot 2020-06-22 at 15 00 42
davidtran commented 4 years ago

Thanks @vietanhcoder for your support!

Hi @sainiankit your className is .makeStyles-dateRange-35 doesn't work because it has a lower priority than the library className: .react-google-flight-datepicker .date-picker-input as this selector has a parent and a child class name.

You have to overwrite the css at .react-google-flight-datepicker .date-picker-input or make a css selector that have bigger priority.

https://www.w3.org/wiki/Css/Training/Priority_level_of_selector