[BUG] - DatePicker styling classes: input and inputWrapper

[rafagouveia]

NextUI Version

2.3.6

Describe the bug

I'm facing difficulties while trying to style the DatePicker component. I noticed that the input and inputWrapper classes are not properly passing props to the component, which is hindering proper styling. This occurs both when attempting to style directly on the component and through extendedVariants.

I've tried several approaches to style this component, but the only property I managed to use was "base". However, when attempting to style, it ends up affecting the entire container of the component, including the label and the input.

screenshot:

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use the next ui version 2.3.6 in your project.
2. Implement the DatePicker component.
3. Attempt to style the DatePicker component using the input and inputWrapper classes.
4. Notice that the input and inputWrapper classes are not properly passing props to the component, resulting in improper styling.
5. Try styling the component directly and also through extendedVariants.
6. Observe that despite trying various approaches, only the "base" property is successfully applied for styling.
7. Notice that styling with the "base" property affects the entire container of the component, including the label and the input.

Expected behavior

I expected that when applying styles to the DatePicker component using the input and inputWrapper classes, the component would properly receive the props and apply the styling accordingly. Specifically, I anticipated that styling would be applied to the input field and its wrapper without affecting other elements within the component, such as the label.

Gravando.2024-04-27.111039.mp4

Screenshots or Videos

with inputWrapper prop

with input prop

with base prop

Operating System Version

• Windows 11

Browser

Edge

[linear]

ENG-750 [BUG] - DatePicker styling classes: input and inputWrapper

[christo9090]

2nd this issue. Just ran into it. No way to access the input via the ClassNames prop.

[eichtici-sys]

The label styles is not working too, only received:
<"base" | "selectorButton" | "selectorIcon" | "popoverContent" | "calendar" | "calendarContent" | "timeInputLabel" | "timeInput">

[tusmenko]

Up on this. label, description, input, inputWrapper classes are not properly passed to the slots, so just ignored

[whitetown]

I solved it like this:

<div className='bg-background-date'>
<DateInput name='min_date' />
</div>

.bg-background-date [data-slot='base'] [data-slot='input-wrapper'] {
@apply bg-background;
}

/* bonus for select and autocomplete */

.bg-background-autocomplete [data-slot='main-wrapper'] [data-slot='input-wrapper'] {
@apply bg-background;
}

.bg-background-select [data-slot='base'] [data-slot='mainWrapper'] [data-slot='trigger'] {
@apply bg-background;
}