Material-ui AppBar。滚动时更改颜色。反应

Posted 2023-02-22

【中文标题】Material-ui AppBar。滚动时更改颜色。反应

【英文标题】：Material-ui AppBar. Changing color on scroll. React

【发布时间】：2020-09-15 09:37:41

【问题描述】：

我发现在滚动时更改 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 现在是透明的，但我需要它在滚动时更改颜色。我没有尝试做任何事情，因为我一直在搜索文档，但找不到类似的东西。如果可以的话，请帮帮我。提前致谢，

【参考方案1】：

我也不知道'useScrollTrigger'是否可以在这里工作

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

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

【讨论】：

我喜欢你的演示！不幸的是，无法让这些方法在我的项目中发挥作用。

【参考方案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
        
      >