react-datepicker
react-datepicker copied to clipboard
Since there's a wrapperClassName to set className on the parent wrapper. why not something like innerWrapperClassName to set className on the inner wrapper?
<div class="react-datepicker-wrapper outer">
<div class="react-datepicker__input-container react-datepicker__view-calendar-icon inner">
<svg class="react-datepicker__calendar-icon " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M96 32V64H48C21.5 64 0 85.5
0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32
14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48
48H400c26.5 0 48-21.5 48-48V192z"></path></svg>
<input placeholder="select date" class="rounded-xl text-black focus:outline-none placeholder-[#000000]
placeholder-opacity-70 bg-[#D9D9D9] w-full" type="text" value="">
</div>
</div>
I could add extra className to the parent wrapper ( i did added "outer" className ) thanks to the wrapperClassName property.
What if i want something similar on the inner wrapper ( the inner div holding svg and input element ) ? A similar property name to wrapperClassName would be cool.
Currently, there is no functionality to set the Custom class name for react-datepicker__input-container.
It seems to me that you should request additional functionality for inputContainerClassName Props or use a descendant selector of the outer class for styling. (e.g. .outer .react-datepicker__input-container)