如何为 Material UI Card 创建角落功能区？ [关闭]

Question

如何在Material-UI 卡片上添加角丝带？对于样式，我使用来自Material UI 的makeStyles

Answer 1

您可以在您的 Material Ui 卡上添加 4 个色带，它们是（左上角、右上角、左下角和右下角）。

1. 只需使用 Material ui 设计制作卡片。

2. 并将卡片的位置设置为相对于父容器的位置，并在 div 中设置，并将其位置设置为绝对。

3. 下面看代码你也可以添加css伪元素来调整功能区边框。

   import React from 'react';
   import { makeStyles } from '@material-ui/core/styles';
   import Card from '@material-ui/core/Card';
   import CardActionArea from '@material-ui/core/CardActionArea';
   import CardActions from '@material-ui/core/CardActions';
   import CardContent from '@material-ui/core/CardContent';
   import CardMedia from '@material-ui/core/CardMedia';
   import Button from '@material-ui/core/Button';
   import Typography from '@material-ui/core/Typography';
   
   root: {
       margin: '0 auto',
       width: 500,
   },
   card: {
       maxWidth: 360,
       marginTop: 40,
       position: "relative",
   },
   ribbon: {
       backgroundColor: 'skyblue',
       position: "absolute",
       color: 'white',
       width: 150,
       zIndex: 3,
       textAlign: 'center',
       textTransform: 'uppercase',
       padding: 5,
       font: 'Lato',
       '&::before': {
           position: "absolute",
           zIndex: -1,
           content: '',
           display: 'block',
           border: '5px solid #2980b9',
       },
       '&::after': {
           position: "absolute",
           zIndex: -1,
           content: '',
           display: 'block',
           border: '5px solid #2980b9',
       },
       transform: 'rotate(-45deg)',
       top: 60,
       marginLeft: -40,
   },
   span: {
   
   }
   
   export default function RibbonMaterialCard() {
     const classes = useStyles();
   
     return (
       <div className={classes.root}>
          <div className={classes.ribbon}><span className={classes.span}>ribbon</span> 
          </div>
       <Card className={classes.card}>
       <CardActionArea>
           <CardMedia
           component="img"
           alt="Contemplative Reptile"
           height="140"
           image="/static/images/cards/contemplative-reptile.jpg"
           title="Contemplative Reptile"
           />
           <CardContent>
           <Typography gutterBottom variant="h5" component="h2">
               Lizard
           </Typography>
           <Typography variant="body2" color="textSecondary" component="p">
               Lizards are a widespread group of squamate reptiles, with over 6,000 
               species, ranging
               across all continents except Antarctica
           </Typography>
           </CardContent>
       </CardActionArea>
       <CardActions>
           <Button size="small" color="primary">
           Share
           </Button>
           <Button size="small" color="primary">
           Learn More
           </Button>
       </CardActions>
       </Card>
   </div>
   );
   }