Issue
I've got a styled MUI Button:
const SecondaryButton = styled(Button)<ButtonProps>(({ theme }) => ({
...
}));
export default SecondaryButton;
If I use it like this:
<label htmlFor="contained-button-file">
<input id="contained-button-file" multiple type="file" hidden onChange={this.selectFiles} />
<SecondaryButton component='span'>
Dateiauswahl
</SecondaryButton>
</label>
I get the following typescript error:
Type '{ children: string; component: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "error" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...> & MUIStyledCommonProps<...>'.
Property 'component' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "error" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...> & MUIStyledCommonProps<...>'
If I use the Standard MUI Button instead there is no error. As far as I understand my styled Button should just forward the properties. Hence, it should work.
Any help is appreciated.
Solution
As mentioned in the doc, due to some limitations, we have to bypass this by type casting, at least at the moment of this writing
const SecondaryButton = styled(Button)(({ theme }) => ({
// ...
})) as typeof Button;
^^^^^^^^^^^^^^^^
export default SecondaryButton;
References
Complications with the component
prop
Answered By - hgb123
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.