How to add margin for Button inside Material-UI, with spacing attribute?

Question

I have a button inside a paper element in material ui. I want to add some margin-top to the Button, that it has some spacing between the FullWidthTabs component and the button.

Code:

    import React from 'react';
    import { makeStyles } from '@material-ui/core/styles';
    import Box from '@material-ui/core/Box';
    import Button from '@material-ui/core/Button';
    import FullWidthTabs from './FullWidthTabs';
    import Paper from '@material-ui/core/Paper';
    import { spacing } from '@material-ui/system';
    
    const useStyles = makeStyles(theme => ({
      root: {
        width: "70vw",
      },
    }));
    
    export default function Bookingbox() {
      const classes = useStyles();
    
      return (
        <div>
          <Box mx="auto" className={classes.root}>
            <Paper elevation={20} >
              <FullWidthTabs />
              <Button variant="contained" 
                        color="green"
                        className={classes.button} 
                        fullWidth="true"
                        mt={1}
                        style={{
                            backgroundColor: "green",
                            color: "white"
                        }}>
                    Suchen
                </Button>
            </Paper>
          </Box>
        </div>
      );
    }

According to the material-ui docs (https://material-ui.com/system/spacing/), spacing should work if I add mt to my button. I did this, and there is no result.

Disclaimer: I have not created an own Theme yet, but from my POV this is not necessary. Maybe the errors lies within not having an own theme.

Answer 1

You can extend the button with the material-ui style system. In this case the spacing system. One way to do this is to create a new component called Button.jsx / Button.tsx like so:

import { styled } from "@material-ui/core/styles";
import { spacing } from "@material-ui/system";
import MuiButton from "@material-ui/core/Button";

/**
 * Applies the spacing system to the material UI Button
 */
const Button = styled(MuiButton)(spacing);

export default Button;

Now you can use is like so: <Button mt={2}>Click Me</Button>. If using typescript, the button props will automatically be extended with all the spacing props!

If you want to add multiple systems, use the compose function:

import { compose, spacing, borders } from "@material-ui/system";
...
export default styled(MuiButton)(compose(spacing, borders))

Update:

For Material UI V5 this is no longer needed. The sx prop includes this automatically. So in this example no customisation is required, you can just use <Button sx={{mt: 2}}>Click Me</Button>

Answer 2

The <Box> component is recommended to add margin and padding to your components. Try using the code below.

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Box from '@material-ui/core/Box'
import Button from '@material-ui/core/Button'
import FullWidthTabs from './FullWidthTabs'
import Paper from '@material-ui/core/Paper'
import { spacing } from '@material-ui/system'

const useStyles = makeStyles(theme => ({
  root: {
    width: "70vw",
  },
}))

export default function Bookingbox() {
  const classes = useStyles()

  return (
    <div>
      <Box mx="auto" className={classes.root}>
        <Paper elevation={20} >
          <FullWidthTabs />
          <Box mt={10}>
            <Button variant="contained"
              color="green"
              className={classes.button}
              fullWidth="true"
              mt={1}
              style={{
                backgroundColor: "green",
                color: "white"
              }}>
              Suchen
            </Button>
          </Box>
        </Paper>
      </Box>
    </div>
  )
}

You can change mt={} to pt={} for padding instead of margin.