英文:
renderInput error while using <DatePicker> from MUI
问题
I am using below for
Not sure why I am getting below error on renderInput
<DatePicker
label="Basic example"
value={selectedDate}
onChange={(newValue) => { setSelectedDate(newValue) }}
renderInput={(props) => <TextField {...props} />}
/>
Type '{ label: string; value: Date; onChange: (newValue: Date) => void; renderInput: (props: any) => Element; }' is not assignable to type 'IntrinsicAttributes & DatePickerProps<Date> & RefAttributes<HTMLDivElement>'.
Property 'renderInput' does not exist on type 'IntrinsicAttributes & DatePickerProps<Date> & RefAttributes<HTMLDivElement>'.ts(2322)
英文:
I am using below for <DatePicker>. Saw lot of videos and sandbox where it works fine.
Not sure why I am getting below error on renderInput
<DatePicker
label="Basic example"
value={selectedDate}
onChange={(newValue) => { setSelectedDate(newValue) }}
renderInput={(props) => <TextField {...props} />}
/>
Type '{ label: string; value: Date; onChange: (newValue: Date) => void; renderInput: (props: any) => Element; }' is not assignable to type 'IntrinsicAttributes & DatePickerProps<Date> & RefAttributes<HTMLDivElement>'.
Property 'renderInput' does not exist on type 'IntrinsicAttributes & DatePickerProps<Date> & RefAttributes<HTMLDivElement>'.ts(2322)
答案1
得分: 4
以下是翻译好的内容：
你使用的 MUI 版本是什么？
我在 renderInput 属性列出来：
https://mui.com/x/api/date-pickers/date-picker/
看起来在最新版本中，应该使用 slots 属性来自定义内部 HTML 组件：https://mui.com/x/api/date-pickers/date-picker/#slots
更多信息请参考这里：https://mui.com/x/react-date-pickers/custom-components/#overriding-components
具体来说，TextField 组件可能是你要定制的组件之一。
请注意还有一个 slotProps 属性：
<DatePicker
{...otherProps}
slots={{
// 使用自定义的 <ActionBar />
actionBar: CustomActionBar,
}}
slotProps={{
// 将 props `actions={['clear']}` 传递给 actionBar slot
actionBar: { actions: ['clear'] },
}}
/>
如果这不能满足你的需求，能否分享一个展示了你引用的工作示例以及你的 MUI 版本的沙盒？
英文:
What version of MUI are you using?
I don't see the renderInput prop listed on the <DatePicker> API:
https://mui.com/x/api/date-pickers/date-picker/
It looks like in the most recent version, the slots prop should be used to customize the internal HTML components: https://mui.com/x/api/date-pickers/date-picker/#slots
See here for more information: https://mui.com/x/react-date-pickers/custom-components/#overriding-components
Specifically, the TextField component might be the one you're looking to target.
Note that there is also a slotProps prop:
<DatePicker
{...otherProps}
slots={{
// Override default <ActionBar /> with a custom one
actionBar: CustomActionBar,
}}
slotProps={{
// pass props `actions={['clear']}` to the actionBar slot
actionBar: { actions: ['clear'] },
}}
/>
If this doesn't get you where you're heading, can you share the sandbox that shows the working example you've referenced, in addition to your MUI version?
答案2
得分: 2
renderInput 是 @mui/x-date-pickers v5 中使用的属性，自 v6 推出后被槽定制所取代。
因此，在新版本中，与 renderInput 相当的是：
<DatePicker
{...props}
slots={{
textField: textFieldProps => <CustomTextField {...textFieldProps} />
}}
/>
英文:
renderInput is the prop used in @mui/x-date-pickers v5 and since v6 were launched it's replaced with customization through slots.
So, equivalent to renderInput in a new version is:
<DatePicker
{...props}
slots={{
textField: textFieldProps => <CustomTextField {...textFieldProps} />
}}
/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论