Material UI + Typescript:属性“颜色”类型不兼容
2021-12-06
2249
我正在尝试使用
DatePicker
组件,但即使我只是传递了 Material UI 提供的 props,类型也不起作用。
这是一个 codesandbox 链接: https://codesandbox.io/s/typescript-material-ui-datepicker-5wil8?file=/src/App.tsx:2395-2412
import React from 'react';
import styled from 'styled-components';
import TextField from '@material-ui/core/TextField';
import { InputProps } from '@material-ui/core/Input';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
import { AUTOCOMPLETE_TYPES } from 'constants/properties';
const StyledDatePicker = styled(DesktopDatePicker)``;
const StyledTextField = styled(TextField)``;
export interface DatePickerProps {
label: string;
className?: string;
disabled?: boolean;
error?: string | boolean;
onChange?: (v: string) => void;
name?: string;
value?: string | number | Date;
min_date?: string | number | Date;
max_date?: string | number | Date;
placeholder?: string;
autocomplete?: AUTOCOMPLETE_TYPES;
}
const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>(
(
{
value,
label,
disabled = false,
autocomplete,
placeholder = 'mm/dd/yyyy',
onChange,
min_date,
max_date,
name,
error,
className,
},
ref
) => (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<StyledDatePicker
inputRef={ref}
minDate={min_date ? new Date(min_date) : undefined}
maxDate={max_date ? new Date(max_date) : undefined}
value={value}
onChange={(newValue) => onChange && onChange(newValue as string)}
disabled={disabled}
renderInput={(props) => (
<TextField
{...props}
error={!!error || (props.error && value !== '')}
className={className}
fullWidth
helperText={error}
id={name}
label={label}
name={name}
variant="outlined"
inputProps={{
...props.inputProps,
placeholder,
id: `${name}-textfield`,
autoComplete: autocomplete,
}}
InputLabelProps={{
...props.InputLabelProps,
color: "primary",
id: `${name}-textfield-label`,
htmlFor: `${name}-textfield`,
}}
/>
)}
/>
</LocalizationProvider>
)
);
export default DatePicker;
即使我设置了
color="primary"
它也不起作用
package.json
"@material-ui/core": "4.12.3",
"@material-ui/lab": "4.0.0-alpha.60",
"@mui/lab": "5.0.0-alpha.58",
"@mui/material": "5.2.2",
1个回答
我搞明白了,但还是不知道原因。
我查看了 MUI 的 DesktopDatePicker 示例: https://mui.com/components/date-picker/#responsiveness
我注意到他们从不同的库导入。来自 @material-ui/core 的库由于某种原因不兼容。
// import TextField from "@material-ui/core/TextField";
import TextField from '@mui/material/TextField';
bigpotato
2021-12-06