title: How to use @material-ui/core/useScrollTrigger in Next.js?
body: <p>I am studying the documentation Material-UI useScrollTrigger and trying to apply it to Next to repeat the Elevate App Bar.</p>
  
  <p><a href="https://material-ui.com/components/app-bar/#usescrolltrigger-options-trigger" rel="nofollow noreferrer">https://material-ui.com/components/app-bar/#usescrolltrigger-options-trigger</a></p>
  
  <pre><code>import React from "react";
  import AppBar from "@material-ui/core/AppBar";
  import useScrollTrigger from "@material-ui/core/useScrollTrigger";
  
  interface Props {
    children: React.ReactElement;
  }
  
  function ElevationScroll(props: Props) {
    const children = props;
    const trigger = useScrollTrigger({
      disableHysteresis: true,
      threshold: 0
    });
  
    return React.cloneElement(children, {
      elevation: trigger ? 4 : 0
    });
  }
  
  export default class HeaderAppBar {
    render() {
      return (
        &lt;ElevationScroll {...props}&gt;
          &lt;AppBar /&gt;
        &lt;/ElevationScroll {...props}&gt;
      );
    }
  }
  </code></pre>
  
  <p>But I get the error <code>ReferenceError: props is not defined</code>. Please help solve the problem.</p>