使 Material-UI Reactjs FloatingActionButton 浮动

Posted 2023-02-22

【中文标题】使 Material-UI Reactjs FloatingActionButton 浮动

【英文标题】：Make Material-UI Reactjs FloatingActionButton float

【发布时间】：2016-06-20 03:11:02

【问题描述】：

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

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

【问题讨论】：

到目前为止你有什么？你有codesandbox我们可以看看吗？

【参考方案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>

【讨论】：

非常缺失的 CSS 块！非常感谢您的贡献！

【参考方案2】：

我实际上是在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>
);

【参考方案3】：

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

像这样：

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/

【参考方案4】：

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

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

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

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

【讨论】：

位置应该是固定的而不是绝对的，以便工厂在滚动时保持在它的位置。

【参考方案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 值将按钮锚定在相对于视口的位置，因此滚动不会影响按钮位置。