[typescript] components loose component prop with emotion or styled-component

[Mario-Eis]

When using styled components >=4.1.0 or emotion >=10 there will be type errors if material ui components are styled.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

No build or type errors are expected when styling material ui components with styled components or emotion.

Current Behavior 😯

A lot of type errors like

TS2740: Type '{ children: string; }' is missing the following properties from type 'Pick<Pick<(Pick<PaperProps, "style" | "title" | "children" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "elevation" | "aria-activedescendant" | "aria-atomic" | ... 245 more ... | "innerRef"> & RefAttributes<...>) | PropsWithChildren<...>, "ref
" | ... 257 more ... | "innerRef"> & Partial<...>, "ref...': ref, style, title, className, and 254 more.

or

TS2322: Type '{ children: Element; component: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<DefaultComponentProps<{ props: { dense?: boolean | undefined; disablePadding?: boolean | undefined; subheader?: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<...>)> | n
ull) | (new (props: any) => Component<...>)> | undefine...'.
  Property 'component' does not exist on type 'IntrinsicAttributes & Pick<Pick<DefaultComponentProps<{ props: { dense?: boolean | undefined; disablePadding?: boolean | undefined; subheader?: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<...>)> | null) | (new (props: any) => Component<...>)
> | undefine...'.

Steps to Reproduce 🕹

1. Checkout https://github.com/Mario-Eis/materialui-styled-test and npm install
2. Run npm script 'serve-dev' --> localhost:3000
3. Build errors are readable in the console.

I don't know for sure, but I think there could be two different issues in the demo.
The first is a simple styled Paper component. When downgrading to styled components <=4.0.3, this issue will be fixed.
The second one is a styled List component. Styled List components will work, as long as there are no prop attributes set. If e.g. component="nav" is added, there will be an error. Downgrading to styled-components 4.0.3 won't work here. But downgrading to material ui 3.9.2, will.

Both cases are shown in the demo.

Context 🔦

I want to style material ui components using styled-components library.

Your Environment 🌎

Tech	Version
Material-UI	4.0.0
React	16.8.17
TypeScript	3.4.5

[eps1lon]

This is a limitation of typescript. See #15759 (comment) for the recommended solution i.e. casting the wrapped component back to the original type. I understand this is not ideal but there are other limitations in typescript that block other approaches. For these simple applications where props available from the HOC are of no interest type casting seems good enough. For more complex examples follow #15827 which should have a proposal by the end of this week.

[Mario-Eis]

Casting back to the original type would be possible. But its a hard change. We have a large code base. And adding casts to each and every component could break the upgrade for us.

I also tried to implement the type cast to the demo under https://github.com/Mario-Eis/materialui-styled-test.

The good news: The issue shown in the demo with the Paper Component, seems to be fixed.

Unfortunately

const StyledList = styled(List)`
    background-color: blue;
    text-align: center;
` as List;

results in

TS2749: 'List' refers to a value, but is being used as a type here.

I pushed the workaround to the demo repo.

List is now defined as a variable.

declare const List: OverridableComponent<{
  props: {
    dense?: boolean;
    disablePadding?: boolean;
    subheader?: React.ReactElement;
  };
  defaultComponent: 'ul';
  classKey: ListClassKey;
}>;

The workaround doesn't seem to work any more.

[eps1lon]

const StyledList = styled(List)`
    background-color: blue;
    text-align: center;
` as typeof List;

Seems codemodable. Though you have to be aware that any type information about props handled by styled is lost.

[Mario-Eis]

Thanks! I updated the demo repo. It compiles without errors now.
Only the IDE (IntelliJ) shows a warning that there is a missing required attribute "component". But I think that will be another issue. Will investigate that.

[IvanGrimes]

@Mario-Eis
Hello.
This should help:

const StyledList = styled<ComponentType<ListProps>>(List)`
    background-color: blue;
    text-align: center;
`;

[oliviertassinari]

Closing as it was labeled as a limitation of TypeScript and has a workaround.

[bengry]

@oliviertassinari why shouldn't the workaround be part of MUI itself though?

[michaelbayday]

interested in this :(

[oliviertassinari]

why shouldn't the workaround be part of MUI itself though?

@bengry If you have proposals on how it could be implemented, please let us know.

[enrique-ramirez]

@oliviertassinari @eps1lon I've been doing this to prevent this issue:

import { Typography } from '@mui/material'
import { createStyled } from '@mui/system'

// Some theme props here
const defaultTheme = {}

const styled = createStyled({ defaultTheme });

const StyledBodyText = styled(Typography)`
  margin-bottom: 12px;
` as typeof Typography;

This works well if I don't want to extend the typography props. However, let's say I want to create a Label component, which is just a typography component with some background color depending on a prop:

import { Typography } from '@mui/material'
import { createStyled } from '@mui/system'

// Some theme props here
const defaultTheme = {}

const styled = createStyled({ defaultTheme });

enum LabelType {
  clothes = 'clothes',
  electronics = 'electronics',
}

interface LabelProps extends TypographyProps {
  type?: LabelType;
}

const styled(Typography)<LabelProps>(({ theme, type = LabelType.Primary }) => {
  // Here I use the `type` prop to generate different background colors. 
  // In the end, I just return an object of styles, but some may be conditional.
  // The point is: I need the `type` prop to generate specific styles.
  return {...MyStyles}
});

This works, but I completely lose the component prop. If I try to do the typecasting like this:

const styled(Typography)<LabelProps>(({ theme, type = LabelType.Primary }) => {
  // Here I use the `type` prop to generate different background colors. 
  // In the end, I just return an object of styles, but some may be conditional.
  // The point is: I need the `type` prop to generate specific styles.
  return {...MyStyles}
}) as typeof Typography;

I get a No overload matches this call. error when attempting to use the type prop.

What's the best way to deal with this scenario? Sorry, it's probably real simple but I've struggled with this for a while and am on the verge of just using any...

[aldrichdev]

const StyledList = styled(List)`
    background-color: blue;
    text-align: center;
` as typeof List;

Seems codemodable. Though you have to be aware that any type information about props handled by styled is lost.

That solution doesn't work for me. I still get a warning when trying to add the component prop: Type 'string' is not assignable to type 'ElementType<any>'.

[aldrichdev]

const StyledList = styled(List)`
    background-color: blue;
    text-align: center;
` as typeof List;

Seems codemodable. Though you have to be aware that any type information about props handled by styled is lost.

That solution doesn't work for me. I still get a warning when trying to add the component prop: Type 'string' is not assignable to type 'ElementType<any>'.

Think I figured this out on my own. I think it wasn't assignable because I was saying any old string value could be used for that prop value, but it specifically needs to be a string that contains the name of an HTML element. Like 'h4' would be okay but TypeScript didn't know if I would pass something that's not an element name, like 'paul'. So I changed my prop type to this, and it works:

typographyComponent?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'span'

[jonbnewman]

@enrique-ramirez were you able to identify a solution to this issue? This is a major problem for me as I need to pass props into styled components while using an alternate component value.

[javier-zabala-lenio]

@enrique-ramirez Did you find a solution? I'm currently facing the same issue.

[zirkelc]

@enrique-ramirez Did you find a solution? I'm currently facing the same issue.

These two solutions worked for me:

• Taken from the example here: https://mui.com/components/lists/#customization

const FireNav = styled(List)<{ component?: React.ElementType }>({ });

• This comment: [typescript] components loose component prop with emotion or styled-component #15695 (comment)

const StyledList = styled(List)`
    background-color: blue;
    text-align: center;
` as typeof List;