1

I am trying to apply custom styling on react-datepicker datepicker input. Using modules:

.custom-input {
  border-radius: 10px !important;
  padding: 5px 10px 5px 30px !important;
  border: 2px solid #cccccc !important;
  font-size: 16px !important;
  line-height: 26px !important;
}

And then I add the className to the datepicker:

 <DatePicker
      className={s["custom-input"]}/>

I created codesandbox here:

https://codesandbox.io/s/clnd-datepicker-forked-h9ju59

Any idea why its not working, even with !important on?

[EDIT] Codesandbox is fixed.

Alex T
  • 3,529
  • 12
  • 56
  • 105
  • sandbox is not working for me, hence cant see the output. Could you please provide output ss and chrome browser element ss? – Chandan Aug 30 '22 at 15:01
  • @Chandan fixed it, could you check again? – Alex T Aug 30 '22 at 15:43
  • https://codesandbox.io/s/clnd-datepicker-forked-m5imoi : use the class name directly in the datepicker. see your forked sandbox Alex. – Chandan Aug 30 '22 at 15:46
  • @Chandan I dont see any changes, is it working? I dont see styles being applied at all – Alex T Aug 31 '22 at 09:20

1 Answers1

0

Hello Alex : I took the code to my local vs code and updated the code a little bit which worked: The only difference I code see here is instead of using s[""] you can use like :

import styles or <any name you would like to call it> from "./Datepicker.module.css"

and then call the css class name in the code like:

className ={styles.<cssClassName>}.

See my code ss: VS Code Screenshot

PS: I also found one strange thing about codesandbox is that it keeps complaining about .module.css file in typescript code file. hence my codesandbox that I sent earlier wasn't working well.

Chandan
  • 217
  • 1
  • 3
  • 17