import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
const useStyles = makeStyles((theme) => ({
container: {
border: '4px solid green',
display: 'inline-flex',
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
export default function CenteredGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container justify="center" className={classes.container}>
<Grid item xs={4}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
</Grid>
</div>
);
}
I wish to have my border only around the two items in the Grid container instead of taking up the full width. I tried adding inline-flex to the parent container, but it didn't solve the issue.