How to custom style react-datepicker? (select-time picker dropdown)

Question

I'm using this package https://reactdatepicker.com/#example-select-time-only

Which style look like this originally:

And I'm trying to customize the select dropdown for time, and want it to look like this:

I only modified the style in the browser to show my desired style, but I can't apply it in my actual style since that style is coming from the node_modules folder. And I guess we don't want to directly modify anything inside the package's own files.

Is there some CSS trick to do this change? On the the documentation, I don't think there is a prop available to pass to the datepicker component in order to achieve the look that I need.

score 0 · Answer 1 · edited Dec 22 '22 at 15:27

0

You can add your styles in your main CSS file and try using !important - it's going to work.

edited Dec 22 '22 at 15:27

halfer

19,824
17
99
186

answered Apr 30 '22 at 09:39

Eisa Rezaei

528
1
12

@Eiza how am I going to remove the "Time" label? – quielfala Apr 30 '22 at 10:11
Oh I think I get it now. I followed this question https://stackoverflow.com/questions/53990971/how-to-customize-the-style-in-react-datepicker – quielfala Apr 30 '22 at 10:33

How to custom style react-datepicker? (select-time picker dropdown)

1 Answers1