reactjs - O interfață poate extinde doar un tip de obiect sau o intersecție de tipuri de obiecte cu membri cunoscuți static

Încerc să folosesc aici TextFieldProps, dar nimic nu funcționează. Cineva știe cum să rezolve această problemă? Cum se folosește TextFieldProps corect? Mulțumesc pentru ajutor.

import TextField, { TextFieldProps } from '@mui/material/TextField';
import { colorThemes } from '../../variables/style.variables';

interface BDBTextFieldProps extends TextFieldProps {
  customColor?: string;
}

export const BDBTextField = ({
  customColor = colorThemes.primary,
  ...props
}: BDBTextFieldProps) => {
  return (
    <TextField
      {...props}
      sx={{
        '& label.Mui-focused': {
          color: customColor,
        },
        '& .MuiOutlinedInput-root': {
          '&.Mui-focused fieldset': {
            borderColor: customColor,
          },
        },
      }}
    />
  );
};

Răspuns #1

• @mui/material v5.11.16

• TypeScript 5.1.3

Să aruncăm o privire asupra tipului TextFieldProps, este un tip de uniune. Cod sursă TextField.d.ts#L229

export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps;

O interfață TS nu are voie să extindă un tip union.

type U = { a: number } | { b: string };

interface I30 extends U { x: string } // error

Poți extinde un tip prin intersecții așa cum este descris aici

import TextField, { TextFieldProps } from "@mui/material/TextField";

type BDBTextFieldProps = TextFieldProps & {
  customColor?: string;
};

const outlinedProps: BDBTextFieldProps = {
  variant: "outlined",
  customColor: "1"
};
const filledProps: BDBTextFieldProps = {
  variant: "filled",
  customColor: "2"
};
const standardProps: BDBTextFieldProps = {
  variant: "standard",
  customColor: "3"
};

codesandbox

Răspunsul #2

Folosirea unei interfețe nu îți permite să extinzi un obiect cu membri necunoscuți static. Încearcă să folosești în schimb un tip.