CODEWITHSUNDEEP
reactjscomponentsstyled-componentscompiler-warningsflux
carciofinospinoso
carciofinospinoso

Reputation: 63

The component styled.p with the id of "sc-iseJRi" has been created dynamically

Good evening everyone, I need some help. I can't solve a warning:

Keyframes.js:20 The component styled.p with the id of "sc-iseJRi" 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.

In this link ( https://pastebin.com/a0kMztfD ) is an example of how I use the styled-component. In a checkboxes file I have all the functions I use for the styled-component rules, which I then call in the App.js file to assign them to a const variable to use in the return() How could I solve this problem? It doesn't create any errors for me but of course it creates a thousand warnings.

I also put the code in addition to the link put previously:

In cards.js:

export function getCard(Card) {
 
    let fillMode = (Card.style === null) ? 'both' : Card.style.fillMode
    let duration = (Card.style === null) ? '1s' : Card.style.duration
 
    const tmp = keyframes`
 
                      from,to {
                                    width: ${Card.width};
                                    height: ${Card.height};
                                    background-color: ${Card.colorCard};
                                    background: linear-gradient(${Card.colorCard2}, ${Card.colorCard});
                                    box-shadow: 0 16px 16px -8px rgba(0,0,0,0.4);
                                    border-radius: 6px;
                                    overflow: hidden;
                                    position: relative;
                                    margin: ${Card.marginCard}; 
                      }
    `;
 
    const CardFinal = styled.div`
          animation: ${duration} ${tmp} ${fillMode};
    `;
 
    return CardFinal
}

In App.js:

Const CardContainer = getCard(card1)
 
return (
    <CardContainer></CardContainer>
);

Upvotes: 1

Views: 1524

Answers (1)

Leomar Amiel
Leomar Amiel

Reputation: 506

The problem is that you're creating a styled.div inside your getCard function.

The way you get rid of this warning is to move the creation of CardFinal outside of getCard and use getCard function to return whatever css you want to generate and pass them as props later on. Here's how you can pass props with styled-components.

This is how it would look like for your code

const CardFinal = styled.div`
  ${getAnimation}
`;

export function getCardProps(Card) {
  const fillMode = Card.style === null ? "both" : Card.style.fillMode;
  const duration = Card.style === null ? "1s" : Card.style.duration;

  const tmp = keyframes`
    from,to {
      width: ${Card.width};
      height: ${Card.height};
      background-color: ${Card.colorCard};
      background: linear-gradient(${Card.colorCard2}, ${Card.colorCard});
      box-shadow: 0 16px 16px -8px rgba(0,0,0,0.4);
      border-radius: 6px;
      overflow: hidden;
      position: relative;
      margin: ${Card.marginCard}; 
    }
  `;

  return { fillMode, duration, tmp };
}

const getAnimation = ({ duration, tmp, fillMode }) => {
  return css`
    animation: ${duration} ${tmp} ${fillMode};
  `;
};

Now you'll just use the getCardProps function to the props that CardFinal expects from the getCardProps.

export default function App() {
  const cardProps = getCardProps({
    style: null,
    weight: "100px",
    height: "100px",
    colorCard: "grey",
    marginCard: "10px"
  });

  return (
    <CardFinal {...cardProps}>
      YO
    </CardFinal>
  );
}

Here's a codesandbox link of where you can try & play around to see how it works. You can also try to un-comment a // const WarningDiv, that basically replicates the warnings you've been encountering with just a basic function that returns an empty styled.div

Upvotes: 4

Related Questions