javascript - 在 styled-components 声明中通过 settimeout 返回样式

Question

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
}

我已经尝试了多次尝试，并且有点像 js 菜鸟，我的控制台正在触发日志，所以我知道道具已成功调用该函数，但它没有返回样式

非常感谢任何帮助..

非常感谢

詹姆士

Answer 1

    const timeout = setTimeout(() => {
      setShowSlidesStyling(true)
    }, 3000);
   // return () => clearTimout(timeout);
  }, []) 

结果 setTimeout 无法返回，因此 useEffect 通过控制状态来工作，该状态控制触发 func 触发样式的道具 ==}} 喊出 simon adcock 来回答

Answer 2

也许只是删除函数并在 setTimeout 内返回字符串？

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