开发者问题收集

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