[pickers] slotProps "sx prop does not exist on type" error with custom DatePicker

[giavinh79]

Steps to reproduce

https://codesandbox.io/p/sandbox/mui-slotprops-types-8v6mfz?file=%2Fsrc%2FDemo.tsx%3A8%2C1

Steps:

1. See type errors on sx prop

Current behavior

Type errors on sx prop

Expected behavior

sx prop has types and intellisense

Context

Currently on V6 of @mui/x-date-pickers (but issue can be reproduced on latest version of MUI as well) and creating a component wrapping the MUI DatePicker and DateRangePicker components.

The custom component may have sx styles defined internally via slotProps but should allow a consumer to override these styles. The codesandbox has a basic example of this but as you can observe, there are type errors on the sx prop in slotProps.

Your environment

MacOS Sonoma
Chrome Version 125.0.6422.61

Search keywords: sx slotProps typescript DatePicker custom

[LukasTy]

@giavinh79 Thank you for creating this issue! 🙏
The problem stems from the fact that this particular slot supports two ways of passing props:

• a callback
• an object

In such case, to replicate/keep the existing behavior you need to use resolveComponentProps to avoid the TS error—and a problem if you'd use a callback in your example.
Please find the updated demo and let me know if you have any further questions regarding this. 😉 👍

@flaviendelangle do you agree that we should improve the documentation in this regard? 🤔
The question is, would it make sense to extend https://mui.com/base-ui/guides/overriding-component-structure/ or create a separate page in X documentation?

[flaviendelangle]

This relates a lot to https://mui-org.slack.com/archives/C04U3R2V9UK/p1714135691643129?thread_ts=1714088113.295129&cid=C04U3R2V9UK

base-ui is dropping the slots approach (but @mui/material will keep using it) so the guide might not survive for very long in its current form.

[LukasTy]

Let this be the issue that we can use as a basis to improve the documentation.
I'm moving it to grooming. 👌