emotion

emotion copied to clipboard

• 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].

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]: {}
}));

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]: {}
}));

Noticing this still. +1 to get it fixed.

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

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

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

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

Still getting this on version 11.7.1

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

Still getting this on version 11.9.0

Minimal repro: https://codesandbox.io/s/emotion-1275-w3dkqd?file=/src/App.tsx It encounters an error at runtime since @emotion/babel-plugin is not used, but it does demonstrate the TypeScript compilation error.

I don't see any way to "fix" this issue. The TypeScript error is totally legit, since TypeScript has no way to know about the transformation applied by @emotion/babel-plugin. I think we should just add a note to the documentation about component selectors to say that as any is necessary in this case.

@Andarist Unless you know how to fix this?

I don't see any way to "fix" this issue. The TypeScript error is totally legit, since TypeScript has no way to know about the transformation applied by @emotion/babel-plugin

Right, so we just assume at the type-level that this transformation is always applied and we add a "fake trait" to our StyledComponent interface: https://github.com/emotion-js/emotion/blob/26e4e3e8b68479f0e3cb8fbec723da47afd6ac98/packages/styled/types/base.d.ts#L41

This allows styled components to be interpolated into our template strings~. But it doesn't allow us to use them as computed properties in the object syntax. We could make it work if we would add & string to those types but that could complicate inheritance and "wrapping" (like styled(styled.div({}))), so unless somebody would try this change and add good type-level tests to cover it I don't think it's something I would explore myself.

The workaround I usually do to cover this is just this:

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

It's simple, explicit and effective.

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

upd: https://github.com/emotion-js/emotion/issues/501