Returning styling via settimeout within styled-components declaration

user_5236915 0
Viewed 668
export const MotionDiv = styled(motion.div)`
  background: ${props => props.showSlides ? 'red' : 'blue'};
  ${({showSlides}) => (showSlides ? ShowSlides() : null)};
`


const ShowSlides = () => {
  console.log('show slides function fires')
  let styling = ``
  setTimeout(() => {
    styling = `background: yellow !important;`
  }, 100);
  console.log('its lit', styling)
  return styling
}

I have tried multiple attempts as well as being a bit of a js noob my console is firing the logs so im aware the prop is successfully calling the function however it's not returning the styling

any help greatly appreciated ..

many thanks

james

styled-components reactjs css-in-js javascript
2 Answers
    const timeout = setTimeout(() => {
      setShowSlidesStyling(true)
    }, 3000);
   // return () => clearTimout(timeout);
  }, [])

Turns out setTimeout's can't return so useEffect works by controlling state which controls prop which fires func which fires styling ==}} shoutout simon adcock for answer

user_52369150

Perhaps just delete the function and just return the string within a setTimeout?

export const MotionDiv = styled(motion.div)`
  background: ${props => props.showSlides ? 'red' : 'blue'};
  ${({showSlides}) => (showSlides ? setTimeout(() => 'background: yellow !important;', 100) : null)};
`
user_88833850
Related