Material-ui 應用欄。 在卷軸上改變顏色。 反應

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

我也不知道“useScrollTrigger”是否可以在這里工作

MUI 的 useScrollTrigger() 可以讓您更改許多 AppBar 的滾動設置。 這包括更改滾動條上的 AppBar 顏色。

您可以查看我的codesandbox以了解如何使用 MUI 的 useScrollTrigger() 來實現此目的。

Answer 2

使用 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
        }}
      >