制作一个 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

将所需的样式添加到您的班级fab：

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>组件中删除prop，因为它已经在课程中提到过。与普通的 HTML 和 CSS 一样，最好将所有样式保留在类中，以使其可重用并更好地分离关注点。

上面应用的样式再次只是一些 CSS：它固定底部的元素，根据您的主题设置在底部和右侧留出间距。

更新：theme.spacing.unit将在 Material UI v5 中弃用。检查（并投票）@yogescicak对更新版本的回答！

Answer 2

这是参考@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),
  },
  ...
});