node.js - Material-ui AppBar。滚动时更改颜色。 react

Question

我发现在滚动时更改 material-ui Appbar 组件颜色非常困难。我一直想知道是否有这样的功能。我也不知道“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);

这都是基本的。 AppBar 现在是透明的，但我需要它在滚动时更改颜色。我没有尝试做任何事情，因为我一直在搜索文档，但找不到类似的东西。如果可以的话，请帮帮我。提前致谢，

Answer 1

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

MUI 的 useScrollTrigger() 可以让您在滚动时更改许多 AppBar 的设置。这包括在滚动时更改 AppBar 颜色。

您可以查看我的codesandbox了解如何使用 MUI 的 useScrollTrigger() 来实现这一点。