在 React 中更新样式化组件的 CSS答案

【问题标题】：Updating CSS of Styled Component on Scroll in React在 React 中更新样式化组件的 CSS
【发布时间】：2021-01-29 19:26:54
【问题描述】：

我在index.jsx 中有一个 Wrapper 组件，如下所示：

export const Header = () => {
  const [sidebar, toggle] = useState(false);

  return (
    <Wrapper>
      <Overlay sidebar={sidebar} onClick={() => toggle(!sidebar)} />
      <Navbar />
      <Hamburger sidebar={sidebar} toggle={toggle} />
      <Sidebar sidebar={sidebar} toggle={toggle} />
    </Wrapper>
  );
};

并且已经使用style.js中的styled-component进行了如下样式化：

export const Wrapper = styled.div`
  background: transparent;
  width: 100%;
  position: fixed;
`;

我是 React 的新手，并试图弄清楚如何在滚动事件上更新 Wrapper 的 CSS。经过一番研究，我读到了 componentDidMount() 和 useEffect() 但我不确定如何在 jsx 中使用它们。

【问题讨论】：

标签： jsx gatsby styled-components

【解决方案1】：

所以，我发现我们实际上可以通过以下方式在 styled-components 中使用props：

const Wrapper = styled.div`
  background: ${({ scrolled }) => scrolled > 300 ? '#212121' : 'transparent'};
  width: 100%;
`;

【讨论】：