Javascript 样式化组件：在滚动上传递状态

我试图将一个道具传递给scroll上的一个样式化组件，但它似乎没有任何效果（即使scroll侦听器可以工作）。有人知道我哪里出错了吗

const Box = styled('div')(  
  `
  ${props => props.scroll && css`
      background-color: pink;
    `};

  `
);

const [scroll, setScrolled] = useState(false);

  const scrollHandler = useCallback(() => {
    if (window.pageYOffset > 100) {
      setScrolled(true);
    }


    if (window.pageYOffset < 100) {
      setScrolled(false);
    }
  }, []);

  useEffect(() => {
    window.addEventListener('scroll', scrollHandler);
  }, [scrollHandler]);


return(
    <Box scroll={scroll}>test</Box>
)

const-Box=styled（'div'）（
`
${props=>props.scroll&&css`
背景颜色：粉红色；
`};
`
);
const[scroll，setScrolled]=使用状态（false）；
常量scrollHandler=useCallback（（）=>{
如果（window.pageYOffset>100）{
setScrolled（真）；
}
如果（window.pageYOffset<100）{
设置标记（假）；
}
}, []);
useffect（（）=>{
addEventListener（'scroll'，scrollHandler）；
}，[scrollHandler]）；
返回(
测试
)

使用

样式化组件的方式没有问题，这是主要问题

可能不起作用的是您的事件侦听器，您应该侦听元素的
onScroll
事件，而不是全局
window
，这可能会产生一些意外的结果，下面是一个工作示例：

const Box = styled.div`
  background-color: ${({ scroll }) => (scroll ? `palegoldenrod` : `pink`)};
  height: 100px;
  overflow: auto;
`;

export default function App() {
  const [scroll, setScrolled] = useState(false);

  useEffect(() => {
    setTimeout(() => { setScrolled(false) }, 1000);
  }, [scroll]);

  return (
    <Box
      scroll={scroll}
      onScroll={() => {
        setScrolled(true);
      }}
    >
      <span>
        Lorem ipsum faucibus facilisis per nisi pharetra vel, rhoncus mattis
        scelerisque consequat fermentum integer, mauris varius orci facilisis
        aptent dictumst orci quis urna semper mollis risus. Sit tristique tempus
        posuere pharetra morbi felis et duis quisque convallis est, quisque
        tellus magna eleifend sed augue nulla dolor consequat accumsan, netus
        elementum luctus eget interdum quisque tempor euismod sem donec.
        Habitasse class aliquam risus non lacinia a scelerisque vivamus
        fermentum, consequat scelerisque diam nibh volutpat eros sociosqu
        praesent pretium tristique, nisl curae malesuada vestibulum etiam purus
        curabitur arcu. In nostra torquent porttitor varius nam nisl ornare,
        aptent amet sit erat dolor platea, imperdiet at bibendum euismod
        condimentum ut interdum id eleifend eu eros semper cubilia sagittis.
        Praesent diam pretium class nostra semper augue nulla senectus
        adipiscing aliquet, habitant nisi lacinia ultricies aenean orci
        condimentum posuere et sollicitudin eu aenean placerat feugiat nibh duis
        proin curae.
      </span>
    </Box>
  );
}

const-Box=styled.div`
背景色：${（{scroll}）=>（滚动？`palegoldenrod`:`pink`）}；
高度：100px；
溢出：自动；
`;
导出默认函数App（）{
const[scroll，setScrolled]=使用状态（false）；
useffect（（）=>{
setTimeout（（）=>{setScrolled（false）}，1000）；
}，[滚动]；
返回(
{
setScrolled（真）；
}}
>
根据nisi pharetra vel，rhoncus mattis，同侧唇面部浮肿
酒酿圆周率节杖，酒酿圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率圆周率
奥奇·奎斯·乌纳·莫利斯·里索斯是一位最有发言权的人，他坐在泰姆普斯的椅子上
这是一个很好的例子
这是一个巨大的机会，它可以帮助我们解决问题
时间上的元素。
居住类阿利夸非拉齐尼亚节杖
发酵液，用于社会科学
前三叉神经前庭
位于诺斯特拉托伦特港的库拉比图尔·阿库（curabitur arcu.），
在bibendum euismod，阿梅特坐在多洛高原上
调味品是一种很好的调味品。
前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类的前一类
居住者nisi lacinia ultricies aenean orci，Adipishing aliquet
欧洲的调味品和调味品
普鲁恩库拉。
);
}

您是如何检查它是否工作的？谢谢！我检查了代码沙盒，你的代码似乎在粉色和黄色之间移动，所以状态在变化？