Make Material-UI Reactjs FloatingActionButton float

user_1865075 0
Viewed 44638

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.

material-ui reactjs css html
5 Answers

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

user_83983000

If you are creating a custom theme you can use the theme overrides to style the FAB (Floating Action Button) is floating in the bottom right corner:

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

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

This will override the FAB for every component usage. You can use the same style with a specific class name and override it again for other usages.

Admin1

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

Edit 35828991/make-material-ui-reactjs-floatingactionbutton-float

*: 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.

user_94494260
Related