How to make border around material ui grid items only - css

Question

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'd like my border to be around only the two items in the Grid container. Currently the border takes up the full width of the container. Even after adding inline-flex to parent container, it doesn't change the border taking full width.

Answer 1

You just to create in your function useStyle, on the return object :
container: {
border: '4px solid green',
display: 'inline-flex',
},
item: {borderRadius: 30px},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
and put :
<Grid item xs={4} classeName={classes.item}>
It's simple so I have a doubt about my capacity to understand your problem, if, please comment.