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

Question

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>
);

score 3 · Accepted Answer · answered Apr 24 '21 at 17:34

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

thanks for the reply! one question, but this way you write all this code directly in the App.js file? — carciofinospinoso, Apr 25 '21 at 08:08
Oh. You don’t need to structure it this way. You can do whatever structure you want! I just added them in a single file for demo purposes. — Leomar Amiel, Apr 25 '21 at 09:30
thank you very much! i am managing to solve my problem! But I have another doubt...I have a new problem...how can I handle the case where I have to work directly on styled.component? I attach an example file: https://pastebin.com/6T2cSyLV — carciofinospinoso, Apr 25 '21 at 20:33
Should just be able to pass a prop on the component via the answer above. I would guess that the code in your pastebin should have the same warning you were trying to avoid — Leomar Amiel, Apr 26 '21 at 07:01
Okay, thank you very much indeed! Thanks to you I understood a lot and I'm solving some problems! Now unfortunately I have another one https://stackoverflow.com/questions/67263878/it-seems-you-are-interpolating-a-keyframe-declaration-hvshe-into-an-untagged-s — carciofinospinoso, Apr 26 '21 at 09:20

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

1 Answers1