Question

因此，我有一些要根据window.pageYOffset值更改样式的组件。当用户向下滚动X值时，我想更改背景色，尽管这不仅仅限于背景色，因为我可能还想更改其他属性，例如font-size，{{1 }}，color等。

这是我目前拥有的。

padding

这里是CodeSandBox，叉子很美！：）

Answer 1

存储滚动偏移量：

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

将颜色传递给样式化的组件：

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

要一次更改多个属性，可以从样式化的组件中导入{css}：

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}
`;

Answer 2

这是我解决问题的方法。
使用handleScroll函数来设置scrollY变量的值。
喜欢：

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

此外，由于window.pageYOffset将是number，因此请保持scrollY的initialState为0。
例如：

const [scrollY, setScrollY] = React.useState(0);
现在将scrollY作为道具发送到Header组件，并使用它来更改background-color和其他组件的属性，例如color，font-size等。
完整的解决方案可以在我的代码沙盒分叉版本中找到。

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

网站：https://y46nj.csb.app/

根据window.pageYOffset更改样式化组件的样式

2 个答案: