reactjs - Ett gränssnitt kan bara utöka en objekttyp eller en snitt av objekttyper med statiskt kända medlemmar

Jag försöker använda TextFieldProps här, men inget fungerar. Någon som vet hur man hanterar detta problem? Hur använder man TextFieldProps på rätt sätt? Tack för hjälpen.

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,
          },
        },
      }}
    />
  );
};

Svar #1

• @mui/material v5.11.16

• TypeScript 5.1.3

Låt oss ta en titt på TextFieldProps-typen, det är en unionstyp. Källkod TextField.d.ts#L229

export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps;

Ett TS-gränssnitt får inte utvidga en unionstyp.

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

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

Du kan använda att utöka en typ via snitt som beskrivs här

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

Svar #2

Att använda ett gränssnitt tillåter dig inte att utöka ett objekt med statiskt okända medlemmar. Försök att använda typ istället.