Type instantiation is excessively deep and possibly infinite (ts-2589) error with styled-component and typescript setup

[quangkhaidam93]

I have an typescript issue Type instantiation is excessively deep and possibly infinite (ts-2589) when using react-svg with styled-component. Please help me resolve this issue. Thank in advance.

My code is below

const BottomNavigation: React.FC<BottomNavigationProps> = ({ buttons }) => {
  return (
    <Container>
      {buttons.map((button) => (
        <Button key={button.id}>
          <Icon
            $active
            src="https://...svg"
          />
          <Label active>{button.label}</Label>
        </Button>
      ))}
    </Container>
  );
};

const Icon = styled(ReactSVG)<{ $active: boolean }>`
  width: 24px;
  height: 24px;

  path {
    fill: ${(props) => (props.$active ? '#FF0000' : '#66798B')};
  }
`;

Some additional image(s):

[quangkhaidam93]

Temporary solution:

Create ThemeProvider and provide dynamic css variables through style props

return (
    <StyledThemeProvider
      theme={{
        colors: {
          primary: colorConfig?.primary_color ?? '#000000',
          secondary: colorConfig?.secondary_color ?? '#000000',
          headline: colorConfig?.headline_color ?? '#000000',
          pageBackground: '#F5F9FF',
          errorMessage: '#E3173C',
        },
      }}
    >
      <Container
        style={{
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          '--primary-color': colorConfig?.primary_color ?? '#000000',
          '--secondary-color': colorConfig?.secondary_color ?? '#000000',
        }}
      >
        {children}
      </Container>
    </StyledThemeProvider>
  );

Use css variables in Component

css file

.icon {
  width: 24px;
  height: 24px;

  path {
    fill: '#66798B';
  }
}

.icon-active {
  width: 24px;
  height: 24px;

  path {
    fill: var(--primary-color);
  }
}

Component file

<ReactSVG
  className={clsx({ 'icon-active': selectedButtonId === button.id, icon: selectedButtonId !== button.id })}
  src={button.icon}
/>