React/Material-UIでheaderを実装③

19318 ワード
React material-ui React テキストリンク
./components/ui/Header.js
import { AppBar, Toolbar } from "@material-ui/core";
import React from "react";
import useScrollTrigger from "@material-ui/core/useScrollTrigger";

function ElevationScroll(props) {
  const { children, window } = props;

  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
    target: window ? window() : undefined,
  });

  return React.cloneElement(children, {
    elevation: trigger ? 4 : 0,
  });
}

const Header = () => {
  return (
    <ElevationScroll>
      <AppBar position="fixed">
        <Toolbar>Header</Toolbar>
      </AppBar>
    </ElevationScroll>
  );
};

export default Header;
App.js
import logo from "./logo.svg";
import "./App.css";
import Header from "./components/ui/Header";

function App() {
  return (
    <div className="App">
      <Header />
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
      <p>Hello Material-UI!</p>
    </div>
  );
}

export default App;