Sometimes, we want to make React Material-UI FloatingActionButton float.

In this article, we’ll look at how to make React Material-UI FloatingActionButton float.

How to make React Material-UI FloatingActionButton float?

To make React Material-UI FloatingActionButton float, we can apply styles to the Fab component to make it float.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Fab } from "@material-ui/core";
import { Add } from "@material-ui/icons";

const useStyles = makeStyles(() => ({
  floatButton: {
    margin: 0,
    top: "auto",
    right: 20,
    bottom: 20,
    left: "auto",
    position: "fixed"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <Fab className={classes.floatButton}>
        <Add />
      </Fab>
    </div>
  );
}

We call makeStyles with a function that sets the floatButton class property to an object that has some styles to make the button float.

We set position to 'fixed' to keep the button in a fixed position.

And we set the position that the button is fixed at with the right and bottom properties.

All numbers are in pixels.

Next, we get the classes object from the useStyles hook returned by makeStyles.

And we apply the CSS styles by setting the className of the Fab to classes.floatButton.

As a result, we should see the floating action button stay at the bottom right of the page.

Conclusion

To make React Material-UI FloatingActionButton float, we can apply styles to the Fab component to make it float.