rmwc: TS x rmwc x styled component: Type instantiation is excessively deep and possibly infinite

All RMWC components extend React.HTMLProps. It looks like transpiler is splitting those apart for some reason which could be the cause of the issue.

In more than a few places, a type has a key that has to be ommited because it conflicts. For instance Button has a label prop that accepts Reacf.ReactNode but HTMLProps says it can only be a string, so I Omit the level prop dome HTMLProps.

This could be the issue as the compiler is deciding to flatten that type and end up with the very long union type. TS now includes an Omit helper which was not previously available, so maybe refactoring to use that could help this issue. Thoughts?

Not saying that the change has to occur here or there, just wanted to share some additional context from what I found when encountering this.

I found that exporting material components with the ComponentType in the base component was causing this complaint. My hunch is that when wrapping these with styled components, because ComponentType has branches it introduces too many conditions and hence, this complaint?

Anyhow, I quieted it down by casting the specific type of export, such as:

import { Card as MaterialCard, CardProps } from '@rmwc/card';
import { ComponentProps, MergeInterfacesT } from '@rmwc/types';
import { FunctionComponent } from 'react';
import styled from 'styled-components';

export const Card = styled(MaterialCard as FunctionComponent<
  MergeInterfacesT<CardProps, ComponentProps>
>)`
  // card styles
`;

you have to specify type for you’re custom component

const CustomCard = styled(Card) width: 21rem; background: whitesmoke; .withComponent('div');

I isolated the issue by going through the code sandbox and downgrading @types/styled-components point release by point release and have found that the conflicts pops up in in 4.1.9. 4.1.8 is a working version.

Something they introduced between that point release is causing the issue, you may want to open an issue up with them at definitely typed. For now, it appears you can downgrade you types package, though I’m unsure of the implications of that.

Working sandbox https://codesandbox.io/s/elastic-agnesi-rxiq3