使 Material-UI Reactjs FloatingActionButton 浮动

Question

在尝试找到 FloatingActionButton 浮动在其标准的右下角屏幕位置而没有结果的示例之后，如果您可以提供一个，我来找您，因为它似乎是一个普通按钮，没有浮动到那个角落默认。

我应该通过设置自定义 CSS 规则让它浮动吗？ Material-UI 文档没有提到任何关于浮动 Material-UI FloatingActionButton 文档的 属性。

原文由 Franco 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 文件（例如：您的 index.html 中引用的样式.css）：

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

…并穿上你的 React 组件：

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

原文由 Gauthier Poulet 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 Sofonias Abathun 发布，翻译遵循 CC BY-SA 4.0 许可协议