html – Make Material-UI Reactjs FloatingActionButton float

html – Make Material-UI Reactjs FloatingActionButton float

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

I actually found this on the Material-UI documentation. I just made a few tweaks to it. Heres 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>
);

html – Make Material-UI Reactjs FloatingActionButton float

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/

Leave a Reply

Your email address will not be published.