javascript - Cambiar el estilo de un styled-component basado en window.pageYOffset

Entonces tengo un componente cuyo estilo me gustaría cambiar en función del valor de window.pageYOffset. Cuando el usuario se desplace hacia abajo X valor, me gustaría cambiar el color de fondo, aunque esto no debería limitarse solo al color de fondo, ya que también podría querer cambiar otras propiedades, como el font-size, color, padding y demás.

Esto es lo que tengo actualmente.

const AppHeader: React.FC = () => {
  const [scrollY, setScrollY] = React.useState('')

  function handleScroll() {
    if (window.pageYOffset > 1) {
      // Be able to change styling properties based on true / false.
    }
  }

  React.useEffect(() => {
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <Header>
      <h1>Header!</h1>
    </Header>
  )
}

const Header = styled.header`
  // Somehow change the backgound color if window.pageYOffset is greater than value.
  background: ${({color}) => color ? "red" : "blue"};
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
`

Aquí tienes un CodeSandBox, ¡se aprecian los forks! :)

Respuesta #1

Almacenar el desplazamiento de la barra de desplazamiento:

function handleScroll() {
  setScrollY(window.pageYOffset);
}

Pasa el color a tu componente con estilo:

  return (
    <Header color={scrollY > 1}>
      <h1>Header!</h1>
    </Header>
  )

Para cambiar varias propiedades a la vez, puedes importar {css} desde styled components:

import styled, { css } from 'styled-components';

// Define a pure group of css properties
const blueLook= css`
    background-color: #0000ff;
    color: #fff;
`

// Reuse blueLook inside a styled component
const Header = styled.header`
  ${props => props.color && blueLook}
`;

Respuesta #2

Aquí está mi enfoque al problema.
Usa la función handleScroll para establecer el valor de la variable scrollY.
Como:

function handleScroll() { setScrollY(window.pageYOffset); }

Además, dado que window.pageYOffset será un número, mantén el estado inicial de scrollY en 0.
Como:

const [scrollY, setScrollY]=React.useState(0);
Ahora envía scrollY como una prop al componente Header y úsalo para cambiar el background-color y otras propiedades del componente como color, font-size, etc.
La solución completa se puede encontrar en mi versión bifurcada del code-sandbox.

Sandbox: https://codesandbox.io/s/change-styled-component-styling-based-on-windowpageyoffset-y46nj?file=/src/App.tsx

Sitio web: https://y46nj.csb.app/