Emotion: Typescript error (TS2464): Computed property

[patpit93]

• gatsby-plugin-emotion version: 4.0.6
• react version: 16.8.4

Relevant code:

const StyledLink = styled(Link)({...});

const MobileLinkContainer = styled("div")({
  ... 
  [StyledLink]: {
    padding: "1rem"
  }
});

What happened:
I get an error: A computed property name must be of type 'string', 'number', 'symbol', or 'any'. ts(2464) at the [StyledLink] line

Suggested solution:
A workaround is to use [StyledLink as any].

[mwarger]

I have the same issue and was able to work around it for now by explicitly returning :any from the child element.

const StyledCheckbox: any = styled.input(({ theme }) => ({}));

const CheckboxLabel = styled.label(({ theme }) => ({
  [StyledCheckbox]: {}
}));

[luk707]

We've been experiencing the same issue for our projects, Rather than typing the StyledCheckbox to any, you can instead do it in the directly within the computed property. This way you keep nice type introspection for the rest of your application:

const StyledCheckbox = styled.input(({ theme }) => ({}));

const CheckboxLabel = styled.label(({ theme }) => ({
  [StyledCheckbox as any]: {}
}));

[B-Stewart]

Noticing this still. +1 to get it fixed.

[Andarist]

I believe this has been fixed already, but if not - please raise it again. Thanks for understanding.

[jsonmaur]

@Andarist This is still an issue in v10.0.27.

[praneetrohida]

@Andarist +1 on v10.0.27 with Next.js

[chadlavi]

Anyone got anything on this? this is still an issue.