利用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="http://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