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

【问题标题】：Returning styling via settimeout within styled-components declaration在 styled-components 声明中通过 settimeout 返回样式
【发布时间】：2020-12-25 07:18:03
【问题描述】：

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 菜鸟，我的控制台正在触发日志，所以我知道道具已成功调用该函数，但它没有返回样式

任何帮助都非常感谢..

非常感谢

詹姆斯

【问题讨论】：

标签： javascript reactjs styled-components css-in-js

【解决方案1】：

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

结果 setTimeout 无法返回，因此 useEffect 的工作原理是控制 state 控制 prop 触发 func 触发样式 ==}} 喊出 simon adcock 来回答

【讨论】：

【解决方案2】：

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

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

【讨论】：

嘿，感谢您抽出宝贵时间提出建议。我之前曾尝试过此操作，但只是为了确保我粘贴您的代码无济于事.. :( 仍然是红色背景