Space between two buttons in Material Design - reactjs

Question

I have two buttons and would like to put a space between them. So, I have tried to do that by putting a box around them and then applying a margin to the box. See code below.
render() {
return (
<>
<ThemeProvider theme={theme}>
<CssBaseline />
<BrowserRouter>
<Header />
</BrowserRouter>
</ThemeProvider>
<ThemeProvider theme={theme}>
<Grid container justify="center">
<Box pt={3}>
<Paper>
<Box pl={3} pr={3} pb={3} pt={3}>
<Grid container spacing={0}>
<Grid item xs={6}>
<Typography
variant="h6"
gutterBottom={false}
onClick={this.handleSetDummyText}
>
Keyword Processor
</Typography>
</Grid>
<Grid item xs={6}>
{/* ********* Offending code section ********** */}
<Button
color={
this.state.sorttypeStatus === 'default'
? 'primary'
: 'secondary'
}
onClick={this.handleSortDefault}
>
DEFAULT
</Button>
{/* ********* Offending code section ********** */}
<Button
color={
this.state.sorttypeStatus === 'alpha'
? 'primary'
: 'secondary'
}
onClick={this.handleSortAlpha}
>
A-Z
</Button>
<Button
color={
this.state.sorttypeStatus === 'length'
? 'primary'
: 'secondary'
}
onClick={this.handleSortLength}
>
LENGTH
</Button>
</Grid>
<Grid container spacing={2}>
<Grid item xs={6}>
<TextField
label="Input Keywords"
fullWidth
multiline
rows={10}
variant="outlined"
margin="normal"
onChange={this.handleInputText}
// defaultValue={defaultInputText}
value={this.state.inputText}
/>
<Box m={1}>
<Button
variant="contained"
color="primary"
onClick={this.inputToOutput}
>
Parse
</Button>
<Button
variant="outlined"
color="secondary"
onClick={this.clearInput}
// default={this.state.inputText}
>
Clear
</Button>
</Box>
<br />
<Checkboxes
handleDedupe={this.handleDedupe}
handleRemoveNumbers={this.handleRemoveNumbers}
handleConvertToLowercase={
this.handleConvertToLowercase
}
handleOneWordPerLine={this.handleOneWordPerLine}
handleAddCommas={this.handleAddCommas}
handleAddCommasSpace={this.handleAddCommasSpace}
handleStartWords={this.handleStartWords}
handleEndWords={this.handleEndWords}
/>
</Grid>
<Grid item xs={6}>
<TextField
label="Output Keywords"
fullWidth
multiline
rows={30}
variant="outlined"
margin="normal"
value={this.state.outputText}
/>
<Button
variant="contained"
color="primary"
mt={5}
onClick={() => {
navigator.clipboard.writeText(
this.state.outputText
);
}}
>
Copy
</Button>
<Button
variant="outlined"
color="secondary"
mt={5}
onClick={this.clearOutput}
>
Clear
</Button>
<Button
variant="outlined"
color="secondary"
mt={5}
onClick={this.handleSetDummyText}
>
Dummy Data
</Button>
</Grid>
</Grid>
</Grid>
</Box>
</Paper>
</Box>
</Grid>
</ThemeProvider>
</>
);
}
}
But the boxes seem to stick together like glue! I do have a custom theme but I cannot seem to get that to work with my App.js file because I am using a class component, rather than a functional component. I understand that you are supposed to use withStyles with class components, but I have struggled to get that to work. So, as a fix, I am trying the Box method.
Any idea how to get my box method to work?

Answer 1

you could use Grid component of material ui and as justify content use space-between
<Grid
style={{width:'140px'}}
container
direction="row"
justify="space-between"
alignItems="center">
<Button/>// here are the buttons
<Button/>
</Grid>
read more about the Grid https://material-ui.com/components/grid/
or you could do it with <div/> i used inline style so that you can read it
easier
<div style ={{ width:'200px',
display:'flex',
flexDirection:'row',
justifyContent:'space-between'
}}>
<button>button 1</button>
<button>button 2</button>
</div>
see working examples with div https://codesandbox.io/s/youthful-taussig-jyesc?file=/src/App.js:67-263

Answer 2

Have you tried to put each button in a box?
<div>
<Box m={1}>
<Button variant="contained">one</Button>
</Box>
<Box m={1}>
<Button variant="contained">two</Button>
</Box>
</div>

Answer 3

The <Box> component works like a <div>, it is a block, so your code can not align buttons in a row.
You can use flex-box to style to get what you want. Use Grid item, container and spacing API of Grid fit your need as well.
Below is an example:
<Grid container spacing={4}>
<Grid item xs={2}>
<Button fullWidth variant="contained" color="primary">
button A{" "}
</Button>
</Grid>
<Grid item xs={2}>
<Button fullWidth variant="contained" color="primary">
button B{" "}
</Button>
</Grid>
</Grid>
When using <Grid container>, you create a flex-box container. By default on ReactJS, the flex-items inside will be aligned by row. That's the reason why We do not have to declare props direction="row" on the container.
You can change the spacing value to change the space between two Grid items. By default, 1 = 8px and it can be customized in material ui as well.
xs indicates the size of your screen, in material ui we have 5 of them xs, sm, md, lg and xl, you can read about it in material ui docs.
fullWidth buttons just to make the buttons take the whole width of containers for ease of seeing space between buttons.
Working example on codesandbox: https://codesandbox.io/s/angry-wescoff-lnj71?file=/src/App.js