CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
Franco
Franco

Reputation: 12545

Make Material-UI Reactjs FloatingActionButton float

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.

Upvotes: 75

Views: 56556

Answers (6)

Franco D'Agostino
Franco D'Agostino

Reputation: 1

In case of custom theme, in MUI v5 the overriding of the style it's a bit different from the v4, see MUI v5-style-changes.

components: {
  MuiFab: {
    styleOverrides: {
      root: {
        position: 'fixed',
        bottom: '2rem',
        right: '2rem'
      }
    }
  }
}

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81320

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.

Upvotes: 14

Sofonias Abathun
Sofonias Abathun

Reputation: 414

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

Upvotes: 25

user9903
user9903

Reputation:

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.

Upvotes: 6

milad nekooei
milad nekooei

Reputation: 141

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/

Upvotes: 14

Gauthier Poulet
Gauthier Poulet

Reputation: 1255

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>
}

Upvotes: 124

Related Questions