reactjs - Använda 'styled()' MUI System-verktyg med ytterligare props (Typescript)

Jag arbetar på ett nytt projekt med MUI System v5. Jag använder styled()-verktyget här (inte styled-components) för att styla och skapa enkla UI-komponenter. Projektet är i TypeScript. Jag har mycket svårigheter just nu eftersom jag inte vet om och hur jag kan skicka props till sådana komponenter. Till exempel har jag en komponent som denna:

import { styled } from '@mui/system';


const InputField = styled('input')(({ width }) => ({
  width: width
}));

och jag vill använda det på det här sättet:

return <InputField width={100}>

men det ger mig ett fel:

Property 'width' does not exist on type '{ theme?: Theme; as?: ElementType<any>; sx?: SxProps<Theme>; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { ...; }'.ts(2339)

Så min fråga är: hur kan jag tillhandahålla ytterligare egenskaper för sådana Material UI-komponenter?

Svar #1

Du kan lägga till den generiska typparametern till den returnerade funktionen av styled så här:

type InputProps = {
  width: number
}

const InputField = styled('input')<InputProps>(({ width }) => ({
  width: width
}));

Relaterade artiklar