如何使用flexbox和REACT创建粘性标题

import React, { Component } from 'react';
import './StickyHeader.css';

class StickyHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isSticky: false
    };
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    const scrollTop = window.pageYOffset;
    if (scrollTop > 0) {
      this.setState({ isSticky: true });
    } else {
      this.setState({ isSticky: false });
    }
  }

  render() {
    const { isSticky } = this.state;

    return (
      <div className={`sticky-header ${isSticky ? 'sticky' : ''}`}>
        <h1>粘性标题</h1>
      </div>
    );
  }
}

export default StickyHeader;

.sticky-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  transition: all 0.3s ease;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}