MUI styled cannot pass component prop to Typography in typescript

Question

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

Yonatan

Answer 1

You have to manually add the 'component' prop.

From https://mui.com/material-ui/guides/typescript/#complications-with-the-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>
  );
}

Oddfellow

nice, somehow missed it in the docs cheers mate! – Yonatan

Answer 2

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>({
  // ...
});

Live Demo

God

This works, although it's pretty ridiculous that it's needed imo – Handcraft

@Handcraft see my updated answer, I have no idea why thing was so complicated before. The problem IIRC is that component is a very common prop and is available in all MUI components so the type definition is defined elsewhere to be more reusable which creates an unfortunate edge case. – God

Its still weird that you have to define that prop if it is available on the component already – Handcraft

Answer 3

Same idea as @GitGitBoom, but without having to define a type. You can use the solution described in the MUI Typescript Guide where you just cast your styled component to the typeof Typography

import React from "react";
import { styled } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";

const MyTypography = 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"
}) as typeof Typography;

export default function StyledComponents() {
  return (
    <MyTypography component="span">
      Styled with styled-components API
    </MyTypography>
  );
}

Christelchristen