Material-ui AppBar. Изменение цвета при прокрутке. Реагировать

Question

Мне очень сложно изменить цвет компонента панели приложений material-ui при прокрутке. Мне все время интересно, есть ли какие-нибудь подобные функции. Я также не знаю, может ли здесь работать useScrollTrigger. Но, пожалуйста, помогите мне, если сможете.

Вот мой код:

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);

Это все в основном c. Панель приложений сейчас прозрачна, но мне нужно, чтобы она меняла цвет прямо при прокрутке. Я не пробовал ничего делать, потому что продолжал рыться в документации и ничего подобного не нашел. Помогите мне, если сможете. Заранее спасибо,

Answer 1

Попробуйте это с помощью 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

Я также не знаю, может ли здесь работать 'useScrollTrigger'

MUI useScrollTrigger () может позволить вам изменять многие настройки AppBar при прокрутке. Это включает в себя изменение цвета AppBar при прокрутке.

Вы можете проверить мой codeandbox , чтобы понять, как использовать MUI useScrollTrigger () для этого.