Implement React refs to allow useScrollTrigger based AppBar elevation

[campb303]

Material UI docs give an example for elevating an AppBar using a scroll trigger and this would be useful behavior to indicate when a user has scrolled past content. This can be achieved by creating a ref to the column content and passing that to a scroll trigger as the target. The scroll trigger can then be used to conditionally apply elevation.

Example:

// File w/ Column
import { useRef } from "react";
...
const colRef = useRef();
...
return(
    // Column
    <Box ref={colRef}>
        { /* pass the ref to the appropriate child */ }
    ...
);

// File w/ AppBar
...
const colIsScrolled = useScrollTrigger({
    "target": colRef,
    "threshold": 0
});
...
return(
    <>
        <AppBar position="sticky"
        elevation={colIsScrolled ? 3 : 0}>
        ...
);
...

At the moment, the ref being passed is becoming null. I'm not sure how to fix this and will fix an elevation level until a better solution can be found.

[campb303]

The next step for this is to better understand React refs. ReactJS Tutorial: Refs on YouTube might be useful.

[campb303]

This is a nice to have but the effort to implement outweighs the benefit. Closing.