Adding margin around button components in Material UI

user_14041981 0
Viewed 332

I have a centered Toolbar in Material UI that has 3 components. Each component is a button. I want to add a margin around each button. I tried adding the {mt} option to the component button as below, but nothing changed. I've been experimenting with makeStyles, but haven't figured it out.

<Box display="flex">
  <Box m="auto">
    <Toolbar>
      <SeasonComponent>
      <WeekComponent>
      <GameComponent>
    </Toolbar>
  </Box>
</Box>

Season component:

return (
  <div>
    <Button 
      variant="outlined" 
      color="primary" 
      onClick={handleClickOpen}
      mt={2}
    >
      Button text 
    </Button>
</div>

Here is a picture of the buttons:

material-ui css
2 Answers
user_95086350

Rather than upgrade my repo to version 5 right now, I just added an invisible button between the buttons. Not a perfect solution, but it solved the problem in the short term.

// SpacerButton.js
import React from 'react';
import Button from '@material-ui/core/Button';

const style = {
   minWidth: 1
}

export default function SpacerButton(props) { 
  return (
    <Button variant="text" style={style}>
      
    </Button>
  );
}
user_140419810
Related