question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

internal styled-components throws warning

See original GitHub issue
The component styled.div with the id of "sc-AxiKw" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component. 

here is the issue pointing: https://github.com/elrumordelaluz/reshake/blob/master/src/Shake.js#L67

I guess the styling should be completely outside of the render method using params, or even better not using styled-components at all and handle everything with just style?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:4
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
promet99commented, Jun 6, 2021

@elrumordelaluz Opened PR. The issue was solved rather simply, so I refactored the code a bit too.

PS, as mentioned in the PR message, let me know if you are interested in creating typescript types for this package

0reactions
promet99commented, Jun 10, 2021

My pleasure, can you put me up as collaborator on npm?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Get rid of warning when dynamically rendering React styled ...
To resolve this only create new StyledComponents outside of any render method and function component.
Read more >
Failed context type warning when using external React ...
Version styled-components: 3.1.5 Issue During my work on a project I had an idea for a ... Warning: Failed context type: Invalid context...
Read more >
Basics - styled-components
Simple dynamic styling: adapting the styling of a component based on its props or a global ... WARNING: THIS IS VERY VERY BAD...
Read more >
Invalid Hook Call Warning - React
Hooks can only be called inside the body of a function component. ... function Bad2() { const style = useMemo(() => { //...
Read more >
react-hydration-error - Next.js
In general this issue is caused by using a specific library or application code that is relying on something that could differ between...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found