Make Material-UI Reactjs FloatingActionButton float

Question

After trying to find an example where the FloatingActionButton floats at its standard bottom-right screen position with no results, I come to you if you could provide one because it seems to be a normal button without floating to that corner by default.

Am I supposed to make it float by setting custom CSS rules? Material-UI docs doesn't mention any property about floating Material-UI FloatingActionButton documentation.

Solution 1

Indeed, no property for this in the component FloatingActionButton for the moment.

Waiting for it :

1) A solution using inline styles :

At the top of your component, add :

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

... and in your render method :

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

OR

2) A solution using CSS file

Add in your CSS file (ex : styles.css referenced on your index.html) :

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

... and put on your React component :

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

Solution 2

I actually found this on the Material-UI documentation. I just made a few tweaks to it. Here's the resulting code.

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

add this to your component

const classes = useStyles();

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

Solution 3

If you want to manipulate CSS in material-ui, its better to use withStyles currying function.

Like this:

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

Documentation link: https://material-ui.com/customization/css-in-js/

Solution 4

In MUI v5, you can add the one-off styles directly to the Fab component via the sx props. Set the position to fixed (as opposed to absolute in other answers*) along with the anchor positions and you're done.

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

*: Setting to absolute will anchor the button to the bottom right of the closest relative container, the container itself will be moved if the user scrolls down which in turn moves the button. Use fixed value to anchor the button in relative to the viewport, so the scrolling would not affect the button position.

View more solutions