Question

在尝试找到一个示例，其中FloatingActionButton浮动在其标准的右下方屏幕位置没有结果，我来找你，如果你可以提供一个，因为它似乎是一个普通的按钮，没有任何智能浮动到那个角落默认情况下。

它是否应该通过设置自定义css规则使其浮动？ Material-UI文档未提及有关浮动Material-UI FloatingActionButton documentation的任何属性。

Answer 1

实际上，目前在组件FloatingActionButton中没有这个属性。

等待它：

1）使用内联样式的解决方案：

在您的组件顶部，添加：

const style = {
    margin: 0,
    top: 'auto',
    right: 20,
    bottom: 20,
    left: 'auto',
    position: 'fixed',
};

...并在你的渲染方法中：

render() {
    return <FloatingActionButton style={style}><ContentAdd /></FloatingActionButton>
}

OR

2）使用CSS文件的解决方案

添加CSS文件（例如：index.html上引用的styles.css）：

.fab {
    margin: 0px;
    top: auto;
    right: 20px;
    bottom: 20px;
    left: auto;
    position: fixed;
};

...并穿上你的React组件：

render() {
    return <FloatingActionButton className="fab"><ContentAdd /></FloatingActionButton>
}

Answer 2

如果你想在material-ui中操作CSS，最好使用withStyles currying函数。

像这样：

import React, {Component} from 'react';
import {Button} from "material-ui";
import {Add} from 'material-ui-icons';
import { withStyles } from 'material-ui/styles';
const style = theme => ({
  fab: {
    margin: 0,
    top: 'auto',
    left: 20,
    bottom: 20,
    right: 'auto',
    position: 'fixed',

  }
});
class MyPage extends Component{
render() {
    const {classes} = this.props;
        return <Button fab variant="fab" color="primary" aria-label="add" className={classes.fab}><Add />
    </Button>
}
export default withStyles(style)(MyPage);

文档链接：https://material-ui.com/customization/css-in-js/

Answer 3

如果您要创建自定义主题，则可以使用主题overrides来设置FAB（浮动操作按钮）浮动在右下角的样式：

import { createMuiTheme } from "@material-ui/core";

export default createMuiTheme({
    overrides: {
        MuiFab: {
            root: {
                position: 'absolute',
                bottom: '2rem',
                right: '2rem'
            }
        }
    }
});

这将覆盖FAB的每种组件用法。您可以使用具有特定类名的相同样式，然后再次覆盖它以用于其他用途。

Answer 4

我实际上是在Material-UI documentation上找到的。我只是做了一些调整。这是结果代码。

import { makeStyles } from '@material-ui/core/styles';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';

const useStyles = makeStyles(theme => ({
  fab: {
    position: 'fixed',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
}));

将此添加到您的组件

const classes = useStyles();

return (
  <Fab color="primary" aria-label="add" className={classes.fab}>
    <AddIcon />
  </Fab>
);

使材料-ui reactjs FloatingActionButton浮动

4 个答案: