I am using MUI v5 and have a simple FormControl as below
I know that the property fullWidth is valid as outlined in the documentation.
import React, { PropsWithChildren } from 'react'
import { Theme } from '@mui/material/styles'
import styled from '@mui/material/styles/styled'
import InputLabel from '@mui/material/InputLabel'
import MenuItem from '@mui/material/MenuItem'
import MuiFormControl from '@mui/material/FormControl'
interface SelectProps extends MuiSelectProps {
id: string
label?: string
options?: { text: string; option: string }[]
}
const FormControl: React.FC<{ theme: Theme }> = styled(MuiFormControl)(({ theme }) => ({
color: theme.palette.nav.links,
borderRadius: 30,
width: 180,
}))
export const Select = ({ label, id, children, options }: PropsWithChildren<SelectProps>) => {
return (
<FormControl fullWidth hiddenLabel>
<InputLabel>
{label}
</InputLabel>
</FormControl>
)
}
Failed to compile
/var/www/target/component-library/src/components/Select/index.tsx
TypeScript error in /var/www/target/component-library/src/components/Select/index.tsx(24,18):
Type '{ children: ("" | Element | undefined)[]; fullWidth: true; hiddenLabel: true; }' is not assignable to type 'IntrinsicAttributes & { theme: Theme; } & { children?: ReactNode; }'.
Property 'fullWidth' does not exist on type 'IntrinsicAttributes & { theme: Theme; } & { children?: ReactNode; }'. TS2322
22 | export const Select = ({ label, id, children, options, ...props }: PropsWithChildren<SelectProps>) => {
23 | return (
> 24 | <FormControl fullWidth hiddenLabel>
| ^
25 | {label && (
26 | <InputLabel id={`input_${id}`} shrink={false}>
27 | {label}
Remove the type React.FC<{ theme: Theme }> when declaring the FormControl:
const FormControl = styled(MuiFormControl)(...);
The resulted component created by the HOC from styled() can infer the prop type from the original component like fullWidth or hiddenLabel, but you assert the type again in your variable. This type:
React.FC<{ theme: Theme }>
Means a functional component that accepts a prop with the type { theme: Theme }, it doesn't have the fullWidth property so Typescript is complaining.
If you want to extend the props type in your custom styled component:
const FormControl = styled(MuiFormControl)<{ yourCustomProp?: string }>(...);
<FormControl yourCustomProp='...' />