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 with no inteligence to float to that corner by default.

Is it supposed I have to make it float by setting a custom css rule? 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>
}