如何仅在材质 ui 网格项目周围制作边框答案

【问题标题】：How to make border around material ui grid items only如何仅在材质 ui 网格项目周围制作边框
【发布时间】：2022-02-15 05:16:44
【问题描述】：

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>
  );
}

我希望我的边框仅围绕 Grid 容器中的两个项目。目前边框占据了容器的整个宽度。即使将 inline-flex 添加到父容器后，它也不会改变边框的全宽。

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

你只需在你的函数useStyle中创建，返回对象：

container: {
    border: '4px solid green',
    display: 'inline-flex',
  },
  item: {borderRadius: 30px}, 
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },

然后放：

<Grid item xs={4} classeName={classes.item}>

这很简单，所以我怀疑我理解您的问题的能力，如果，请发表评论。

【讨论】：