我正在使用材料UI 和 React 制作CRUD应用程序，我希望主屏幕是一个包含当前记录的表格，以及一个{{1} }按钮浮动在表格“上方”的固定位置上。我希望滚动屏幕时此按钮保持在相同位置。
这是我组件的代码：
Fab使用此代码，import React, { Component } from 'react';
import Cookies from 'js-cookie';
import axios from 'axios';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import Icon from '@material-ui/core/Icon';
import Album from './Album.js'
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
},
fab: {
margin: theme.spacing.unit,
},
extendedIcon: {
marginRight: theme.spacing.unit,
},
});
class AddAlbumFloatingButton extends Component {
constructor(props) {
super(props);
const {classes} = props;
}
render() {
return(
<div>
<Fab color="primary" aria-label="Add" className="classes.fab">
<AddIcon />
</Fab>
</div>
)
}
}
AddAlbumFloatingButton.propTypes = {
classes: PropTypes.object.isRequired,
}
class Albums extends Component {
constructor(props) {
...
}
getData() {
...
}
callDetail(instance) {
...
}
callList() {
...
}
render() {
if(this.state.mode === 'table'){
return (
<div>
<AddAlbumFloatingButton />
<AlbumsTable classes={this.state.classes} albums={this.albums} onCallDetail={this.callDetail}/>
</div>
);
} else {
return (<AlbumDetail instance={this.state.instance} onCallList={this.callList} />);
}
}
}
Albums.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Albums);
按钮与屏幕的其余部分一起上下滚动。我试图在Fab上设置position: 'fixed'，但是没有用。
答案 0 :(得分：0)
您必须将位置固定在AddAlbumFloatingButton组件标签上：
<AddAlbumFloatingButton style={{position:fixed}}/>
希望有帮助。