Unable to Style the InputGroup for the DatePickerInput Component

[gautomdas]

Description

Hey, we're using the <DatePickerInput /> on mobile and have been running into some unwanted zooming as a result of the fontSize of the input being less than 16px (or 1rem). We want to maintain the same font size we have for inputs for our desktop site, so we were hoping we could override this font by passing down the sx prop like:

<DatePickerInput sx={{fontSize: 'lg'}}/>

However, this wasn't working as expected. Taking a closer look at how the props are handled for the <DatePickerInput /> we noticed that {...rest} comes after {...themeProps} which could be overriding this. We were curious if the prop spreading for these props could be moved after the {...themeProps} or if there could be a way to override the fontSize for the <DatePickerInput /> component. Some other possibilities could be extracting the sx prop explicitly and passing it to the fieldProps of the <DateField />.

Any advice or thoughts would be greatly appreciated, thanks!

Link to Reproduction

No response

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Saas UI Version

2.8.8

Chakra UI Version

No response

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

Date Picker Version: 0.12.36

[linear]

SUI-650 Unable to Style the InputGroup for the DatePickerInput Component