使用 MaterialUI Grid 指定 ::after 样式答案

【问题标题】：Specify ::after style with MaterialUI Grid使用 MaterialUI Grid 指定 ::after 样式
【发布时间】：2021-03-01 10:51:30
【问题描述】：

我阅读了Flex-box: Align last row to grid 并尝试看看这是否也适用于我：

.grid::after {
  content: "";
  flex: auto;
}

但不确定如何在我在 MaterialUI 中使用的 JS 样式中指定这一点：

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    height: 140,
    width: 140,
  },
  control: {
    padding: theme.spacing(2),
  },
  fullName: {
    marginRight: '3px'
  }
}));

比如如何在 MaterialUI Grid 中添加 after？

 <Grid className={classes.root} container justify="space-around" spacing={2}>
   <CompanyList companies={companies} data-test-id="companyList" />
 </Grid>

【问题讨论】：

标签： javascript css material-ui

【解决方案1】：

你可以像下面这样使用：

const useStyles = makeStyles((theme) => ({
  grid: {
    // --- some styles
    '&::after': {
        // --- some style
    }

  },
}));

【讨论】：

【解决方案2】：

与add pseudo element to material-ui component的任务类似

内容属性需要双引号

工作示例

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    "&::after": {
      content: '""',
      width: 40,
      height: 40,
      backgroundColor: "cyan",
      color: "white"
    }
  },
}));

export default function Material() {
  const classes = useStyles();

  return (
    <div>
      <h1>Material</h1>
      <Grid
        className={classes.root}
        container
        justify="space-around"
        spacing={2}
      >
        <CompanyList companies={companies} data-test-id="companyList" />
      </Grid>
    </div>
  );
}

【讨论】：