Блог

Я пытаюсь передать реквизит стилизованному компоненту при прокрутке, но, похоже, это не имеет никакого эффекта (хотя прослушиватель прокрутки работает). Кто-нибудь видит, где я ошибаюсь?

 const Box = styled('div')(  
  `
  ${props => props.scroll amp;amp; 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>
)
 

Нет ничего плохого в том, как вы используете styled-component , что является основным вопросом.

Что может не сработать, так это ваш прослушиватель событий, вы должны прослушивать 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>
  );
}