Make Material-UI Reactjs FloatingActionButton float - html

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.

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

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

Answer 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/

Answer 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.

Answer 5

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.

Answer 6

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