import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, Fab } from '@material-ui/core';

const styles = theme => ({
  FAButton: {
    position: 'absolute',
    top: -28,
    left: theme.spacing.unit * -6,
    // Para o botão ficar por cima das imagens do Card
    zIndex: theme.zIndex.mobileStepper,
  },
  [theme.breakpoints.down(1000 + theme.spacing.unit * 8)]: {
    FAButton: {
      position: 'fixed',
      top: 'auto',
      left: 'auto',
      bottom: 20,
      right: 20,
    },
  },
});

const FAButton = ({ children, classes, onClick, ...rest }) => (
  <Fab onClick={onClick} color="secondary" className={classes.FAButton} {...rest}>
    {children}
  </Fab>
);

FAButton.propTypes = {
  children: PropTypes.node.isRequired,
};

export default withStyles(styles)(FAButton);

@@ -170,16 +170,13 @@
 n: '
-absolute
+fixed
 ',%0A 
@@ -187,11 +187,14 @@
 op: 
--28
+'auto'
 ,%0A  
@@ -205,31 +205,45 @@
 ft: 
-theme.spacing.unit * -6
+'auto',%0A    bottom: 23,%0A    right: 23
 ,%0A  
@@ -344,196 +344,8 @@
  %7D,%0A
-  %5Btheme.breakpoints.down(1000 + theme.spacing.unit * 8)%5D: %7B%0A    FAButton: %7B%0A      position: 'fixed',%0A      top: 'auto',%0A      left: 'auto',%0A      bottom: 20,%0A      right: 20,%0A    %7D,%0A  %7D,%0A
 %7D);%0A

Fix FAButton to the bottom for all screen sizes