search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.92k stars 1.2k forks source link

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

Open giavinh79 opened 1 month ago

giavinh79 commented 1 month ago

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 commented 1 month ago

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

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 commented 1 month ago

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 commented 1 month ago

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