How to change the width of date range picker

HI there,

I am having trouble changing the width of the date range picker, adding styles doesn’t seem to have an effect on the component, is there anyway to solve this?


I am also trying to style the date-range picker. Maybe changing font size or heights?
It always comes as a fat box that makes it stick out in some situations.

Are there styles that can be applied?
Tried changing div styles but no effect.

I have the same question, please someone can answer?

1 Like

Seems a bit late, but due to specificity you have to dig inside the components to solve this problem, for instance:

.DateRangePickerInput {
  background-color: inherit;
  width: auto;

and to change things like arrow one can change the following class for example:

.DateRangePickerInput_arrow_svg {
  /* things you want to overwrite */

Although a satisfiable output requires quite some tuning…