利用Material UI的AppBar组件实现底部固定的版权声明组件

1、实现顶部固定

由于是尝试使用Material UI作为UI库学习React,尝试做首页时就需要一个底部固定的版权声明组件(当然并不一定要用作版权声明,这只是常规需求)。翻了翻Material的组件示例,发现AppBar,即应用栏组件示例中显示可以将其固定在底部。所以尝试使用该组件来实现该功能,尝试代码如下:

import React from 'react';
import Link from "@material-ui/core/Link";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
const useStyles = makeStyles((theme) => ({	
	copyright: {
	  top: 'auto',
	  bottom: theme.spacing(2),
	}
  }));
function Copyright() {
    const classes = useStyles();
        return (
	    <AppBar position="fixed" className={classes.copyright}>
	        <Typography variant="body1" color="textSecondary" align="center" >
		    {"Copyright © "}{new Date().getFullYear()}{" | "}	
		    <Link color="inherit" variant="inherit" href="https://www.iimm.ink" target="_blank">
                        {"清风揽月阁  @柳涤尘"}
		    </Link>{" "}			
		    {"."}
		</Typography>
	    </AppBar>
	);
}
export default Copyright;

其中useStyles中copyright的bottom属性也可以直接使用数字,效果差不多。以上代码可以实现顶部固定,效果如下图:

可以看到其存在默认的primay颜色属性,且默认占满了屏幕宽度。为了适配各种设备且保持美观,一般不要这么宽,另外我们需要去掉颜色,使其透明。

2、改变宽度,变为透明

改变宽度一开始我以为只需要像<Container>在<AppBar position=”fixed” className={classes.copyright}>中添加maxWidth属性即可,即更改为:<AppBar position=”fixed” className={classes.copyright}  maxwidth=”xs”>,事实证明是不行的。需要使用<Container maxWidth=”xs”> </Container>包裹AppBar组件才可以。不过因为后面要改成透明的,没有颜色也看不出,所以我最后也没有改了。

而改成透明,则只需要在<AppBar position=”fixed” className={classes.copyright} >中在增加style属性:<AppBar position=”fixed” className={classes.copyright} style={{background:’transparent’,boxShadow:’none’}}>,注意style值必须是个对象,不能像HTML中那样写,还需要外层包裹一层{}。

--------------------------------

除非注明,否则均为清风揽月阁原创文章,转载应以链接形式标明本文链接

本文链接:https://www.iimm.ink/224.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

回到顶部