Static fields are removed when the component is styled

[mnajdova]

Current behavior:

When styling a component with the styled() utility, the statics defined on the original component are gone.

To reproduce:

Here is a sandbox illustrating the issue - https://codesandbox.io/s/sweet-glade-d99wh?file=/src/App.tsx

Expected behavior:

The statics should be copied on the created styled components

Environment information:

• react version: 17.0.2
• @emotion/react version: 11.4.1

---

First reported in https://github.com/mui-org/material-ui/issues/28136

[srmagura]

@Andarist I have done some research on this and it seems like a reasonable request. It would just use hoist-non-react-statics.

The problem is the bundle size — it would increase the size of @emotion/styled by 25%. (non-tree-shakable)

styled-components has copy-pasted hoist-non-react-statics into their code here. We could do that too but then we have to maintain it.

[Andarist]

Yeah, the size increase is worrying for a feature that is very rarely requested. I don't recall this being raised in the issues for a very long time (I might have missed some comments, but the point still stands - this definitely was not asked for frequently).

So I'm kinda on the fence here - how big of a problem it is really? And how many people need this and in what scenarios? Can they code be refactored in a way that would not the statics to be hoisted? How one declares a functional component with statics in a TS-friendly way?

[srmagura]

Agreed. IMO we should not add this unless people provide some strong use cases for it using functional components.

In the Ant Design example in mui-org/material-ui#28136, there is a trivial workaround — just access the static property from the original (unstyled) component.

[mnajdova]

We had only one issue around this in MUI so far. We can wait to see if more pops up. I can link them here.

[sag1v]

We also have issues with this (using MUI)! :(