Using MUI with typescript and want to use styled from MUI as well. When passing the component prop to the styled component I get an error from the typescript sandbox below, maybe anyone knows a workaround.
https://codesandbox.io/s/material-demo-forked-lxdrj?file=/demo.tsx
You have to manually add the 'component' prop.
From https://material-ui.com/guides/typescript/#usage-of-component-prop
import React from "react";
import type { TypographyProps } from "@material-ui/core";
import { styled } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
type MyT = React.ComponentType<TypographyProps<"span", { component: "span" }>>;
const MyTypography: MyT = styled(Typography)({
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
border: 0,
borderRadius: 3,
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
color: "white",
height: 48,
padding: "0 30px"
});
export default function StyledComponents() {
return (
<MyTypography component="span">Styled with styled-components API</MyTypography>
);
}
You can use generic type parameter in HOC created by styled:
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
type ExtraProps = {
component: React.ElementType;
};
const MyTypography = styled(Typography)<ExtraProps>({
// ...
});
const StyledTypography = styled<any>(Typography)`
margin: 12px 0;`;
this worked for me...
here is example ⇓
https://codesandbox.io/s/styled-typography-trb0v?file=/src/App.tsx:76-148