使 Material-UI Reactjs FloatingActionButton 浮动

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>
}

或

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

添加到您的 CSS 文件中（例如：styles.css 在您的 index.html 中引用）：

.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);

文档 link：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。您可以使用具有特定 class 名称的相同样式，并再次覆盖它以用于其他用途。

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>
);

Answer 5

在 MUI v5 中，您可以通过 sx 道具将一次性样式直接添加到 Fab 组件。将位置设置为 fixed（与其他答案中的 absolute 相反*）以及锚点位置，您就完成了。

return (
  <Fab
    sx={{
      position: "fixed",
      bottom: (theme) => theme.spacing(2),
      right: (theme) => theme.spacing(2)
    }}
    color="primary"
  >
    <AddIcon />
  </Fab>
);

*：设置为 absolute 会将按钮锚定到最近的相对容器的右下角，如果用户向下滚动，容器本身将移动，从而移动按钮。使用 fixed 值相对于视口锚定按钮，因此滚动不会影响按钮位置。

使 Material-UI Reactjs FloatingActionButton 浮动

Make Material-UI Reactjs FloatingActionButton float

html

css

reactjs

material-ui