Using Typescript with Styled Components and Material UI

Question

Using Typescript with MUI+Styled-Components and you have to directly pass props to MUI elements due to type errors….

const Index = () => {
  return (
      <StyledButton
        variant="contained"
      >
        Hello World
      </StyledButton>
   )}


const StyledButton = styled(Button)`
  background: red;
  color: white;
`;

However, this will error the following:

Type '{ children: string; variant: "contained"; }' is not assignable to type '(IntrinsicAttributes & Pick>) | PropsWithChildren, "form" | "style" | "title" | ... 284 more ... | "variant"> & Partial<...>, "form" | ... 286 more ... | "variant"> & { ...; } & { ...; }) | (IntrinsicAttributes & ... 3 more ... & { ...; })’

When you directly pass in props such as below, then this error goes away. Even using 0 props and 0 children on the Styled MUI element, it gives the error.

const StyledButton = styled(props => <Button {...props} />)`
  background: red;
  color: white;
`;

Matthias · Accepted Answer · 2023-09-08 20:48:11Z

5

This should work fine with MUI >= 4.*

For earlier versions, from this tutorial, try enforcing the type of StyledButton:

const StyledButton = styled(Button)`
  background: red;
  color: white;
` as typeof Button;

edited Sep 8, 2023 at 20:48

Matthias

15.8k9 gold badges51 silver badges66 bronze badges

answered Jun 24, 2019 at 8:21

Matthieu Dazy

831 gold badge2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Iron Over a year ago

thank you! it should actually be: as typeof Button instead

Nathron · Accepted Answer · 2020-05-17 02:13:19Z

3

I accidentally solved this by installing @types/styled-components / styled-components, which I required anyways to get styled/theme/TS all playing nicely together:

import React from "react";
import styled from "styled-components";
import { Theme, useTheme } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const StyledCustomButton: React.FC<{
  theme: Theme;
}> = styled(({ ...props }) => <Button {...props}>Test</Button>)`
  && {
    padding-bottom: ${(props) => props.theme.spacing(2)}px;
  }
`;

const CustomButton: React.FC = () => {
  const theme: Theme = useTheme();
  return <StyledCustomButton theme={theme} />;
};

export default CustomButton;

answered May 17, 2020 at 2:13

Nathron

1,6593 gold badges18 silver badges25 bronze badges

Collectives™ on Stack Overflow

Using Typescript with Styled Components and Material UI

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related