Material-ui AppBar. Changing color on scroll. React

Question

I find it very hard to change the material-ui Appbar component color on scroll. I keep wondering if there's any functionality like that. I also don't know if the 'useScrollTrigger' can work here. But please help me out if you can.

Here's my code:

import React, {Component} from 'react';
import '../css/Home.css'
import Typography from '@material-ui/core/Typography'
import { withStyles, createStyles } from '@material-ui/core'
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Avatar from '@material-ui/core/Avatar';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
// import Divider from '@material-ui/core/Divider'

import Slide from '../components/Slider'

import {Link} from 'react-router-dom';

const styles = theme => createStyles({
   appbar: {
       background: 'transparent',
       boxShadow: 'none',
       transition: '.5s'
   },
   avatar: {
       width: '70px',
       height: '70px',
       marginLeft: 100
   },
   fragment: {
    position: 'absolute',
    right: '10em'
   },
   links: {
    marginLeft: '40px',
    fontFamily: 'Trebuchet MS',
    fontWeight: 'bold',
    padding: '10px',
    borderRadius: '5px',
    transition: '.8s'
   },
   mainGrid: {
    marginTop: '150px',
    fontFamily: 'Trebuchet MS'
   },
   grid: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center'
   },
   button: {
    backgroundImage: 'linear-gradient(to right, rgb(26, 131, 252), rgb(250, 29, 250))',
    color: 'white',
    transition: '.5s'
   },
   img: {
       width: '90%',
       height: '90%'
   },
   section: {
    marginTop: '150px',
    padding: '20px',
    borderRadius: '40px'
   },
   showcase: {
       [theme.breakpoints.down('sm')]: {
        width: '100%',
        textAlign: 'center'
       },
       margin: '40px auto',
       marginTop: '40px',
       width: '50%',       

   },
   slider: {
    backgroundColor: 'rgba(0, 0, 0, 0.671)',
    padding: '12px 25px',
    borderRadius: '20px'
   }
})

class Home extends Component {
    render(){
        const {classes} = this.props;
        return(
            <div >
              <AppBar id='header' position='fixed' className={classes.appbar} >
                <Toolbar>
                    <Avatar
                    src='logo.png'
                    variant='square'
                    className={classes.avatar}
                    />

                    <div className={classes.fragment} >
                    <Typography color='primary' className={classes.links} variant='inherit' component={Link} to='about' id='links' >About me</Typography>
                    <Typography color='primary' className={classes.links} variant='inherit' component={Link} to='/gallery' id='links' >Gallery</Typography>
                    <Typography color='primary' className={classes.links} variant='inherit' component={Link} to='/contact' id='links' >Contact me</Typography>
                    <Typography color='primary' className={classes.links} variant='inherit' component={Link} to='/hire' id='links' >Hire me</Typography>
                    </div>
                </Toolbar>
              </AppBar>

                <Grid className={classes.mainGrid} container >
                    <Grid item className={classes.grid} xs={12} sm={12} md={6} lg={6} >
                        <div>
                        <Typography style={{letterSpacing: '1px'}} variant='body2' color='primary' >HEY THERE !</Typography><br />
                        <Typography style={{fontWeight: 'bold', fontSize: '30px', letterSpacing: '1px'}} variant='h5' color='primary' >I AM NATHAN BRAIN</Typography><br />
                        <Typography style={{ fontWeight: 500, fontSize: '15px', letterSpacing: '1px'}} variant='h5' color='primary' >CREATIVE WEB DESIGNER AND DEVELOPER</Typography><br />
                        <br />
                        <Button id='button' className={classes.button} >
                            SEE MY WORKS
                        </Button>
                        </div>
                    </Grid>

                    <Grid item xs={12} sm={12} md={6} lg={6} >
                        <img className={classes.img} src='nathan.png' alt='nathan' />
                    </Grid>
                </Grid>


                <section className={classes.section} >
                    <div className={classes.showcase} >
                    <Typography variant='h4' color='primary' style={{fontWeight: 'bold', marginBottom: '40px', fontFamily: 'Trebuchet MS'}} >SHOWCASE</Typography>
                    <div className={classes.slider}>
                    <Slide />
                    </div>
                    </div>
                </section>
            </div>
        )
    }
}

export default withStyles(styles)(Home);

It's all basic. The AppBar is transparent right now, but I need it to change color right on scroll. I haven't tried doing anything, because I kept serching through the documentation, and I couldn't find anything like that. Help me out if you can. Thanks in advance,

Answer 1

Try this using material-ui

<AppBar className={classNames(classes.appBar)}
        elevation={trigger ? 24 : 0}
        style={{
          backgroundColor: trigger ? "#fff" : "transparent",
          boxShadow: trigger
            ? "5px 0px 27px -5px rgba(0, 0, 0, 0.3) !important"
            : undefined
        }}
      >

Answer 2

I also don't know if the 'useScrollTrigger' can work here

MUI's useScrollTrigger() can allow you to change many AppBar's settings on scroll. That includes changing the AppBar color on scroll.

You can check out my codesandbox to understand how to use MUI's useScrollTrigger() to achieve this.