Recibo la siguiente advertencia en la consola del navegador:
react_devtools_backend.js:3973 The component styled.div with the id of "sc-dmRaPn" 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.Sin embargo, se supone que mi posicionamiento CSS es dinámico. La altura cambia cada 5 segundos.
¿Puedo hacer algo de lo siguiente?
// Height of the div is dynamically calculated every 5 seconds private randomHeight = () => { return Math.floor(Math.random() * 85); } // This method is eventually called by the Render method private getLeftDiv = () => { const height = this.randomHeight(); const keyFrames = keyframes` 0% { left: -120px; } 5% { left: -45px; } 95% { left: -45px; } 100% { left: -120px; } ` const HeadDiv = styled.div` position: fixed; animation: ${keyFrames} 2s linear; animation-timing-function: ease-in ; left: -120px; top: ${height}%; transform: rotate(45deg); ` return HeadDiv; }Debe declarar el componente con estilo HeadDiv por separado fuera del renderizado del componente actual y usar sus props para pasarle los valores dinámicos.
const HeadDiv = styled.div` position: fixed; animation: ${props => props.keyFrames} 2s linear; animation-timing-function: ease-in ; left: -120px; top: ${props => props.height}%; transform: rotate(45deg); ` Ahora puede pasar los valores dinámicos a los accesorios de HeadDiv .
<HeadDiv keyFrames={keyFrames} height={height} />