将React Material-UI组件粘贴到屏幕的右下角

Question

我正在制作一个CRUD应用程序，我想将'创建'控件显示为一个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={this.props.classes.fab} style={{position: 'fixed'}}>
          <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 classes={this.state.classes}/>
          <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);

Answer 1

这是指@Siavas在指定spacing中已被弃用并将在MUI v5中删除的答案。

您可以改为执行以下操作：

const styles = theme => ({
  ...
  fab: {
    margin: theme.spacing.unit, // You might not need this now
    position: "fixed",
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
  ...
});

Answer 2

将必需的样式添加到您的课程const styles = theme => ({ ... fab: { margin: theme.spacing.unit, // You might not need this now position: "fixed", bottom: theme.spacing.unit * 2, right: theme.spacing.unit * 3 }, ... }); ：

style

并从您的<Fab>组件中删除df道具，因为在类中已经提到过。与普通的HTML和CSS一样，最好将所有样式保留在类中，以使其可重用并具有更好的separation of concerns。

上面应用的样式只是一些CSS：它根据元素设置将元素固定在底部，底部和右侧间隔。