React Material UI - 自定义 CardMedia 的渲染

Posted 2023-02-22

【中文标题】React Material UI - 自定义 CardMedia 的渲染

【英文标题】：React Material UI - Customize rendering of CardMedia

【发布时间】：2021-03-23 16:38:45

【问题描述】：

我想知道如何调整 React Material UI 的 CardMedia 以生成类似的东西：

如您所见，我预期的结果中有 3 项：

WebP 格式的图像本身 (an example)

一个持续时间（例如 06:59:14），被一个框包围（以与图像区分开来）

SVG 格式的平台标志，被一个框包围（以与图像区分开来）

目前，我将所有平台 SVG 都存储在一个文件中：

    export default 
        "PC": `
            M4.539062 7.515625 L 4.539062 13.886719 L 7.6875 13.886719 L 7.695312 11.738281 L 7.707031 9.597656 L 8.625 9.585938 L 9.542969 9.578125 L 10.546875 8.589844 L 11.550781 7.605469 L 11.550781 3.148438 L 10.527344 2.144531 L 9.507812 1.140625 L 4.539062 1.140625 Z 
            M8.28125 5.410156 L 8.289062 7.113281 L 8 7.101562 L 7.707031 7.089844 L 7.695312 5.40625 L 7.6875 3.722656 L 7.9375 3.714844 C 8.082031 3.707031 8.210938 3.703125 8.230469 3.703125 C 8.253906 3.707031 8.273438 4.308594 8.28125 5.410156 Z 
            M8.28125 5.410156 
            M13.09375 2.148438 L 12.074219 3.148438 L 12.074219 11.917969 L 13.078125 12.902344 L 14.085938 13.886719 L 17.457031 13.886719 L 18.460938 12.898438 L 19.460938 11.917969 L 19.445312 8.417969 L 16.144531 8.417969 L 16.132812 9.878906 L 16.125 11.347656 L 15.601562 11.347656 L 15.601562 3.71875 L 16.125 3.71875 L 16.132812 4.925781 L 16.144531 6.132812 L 19.445312 6.132812 L 19.460938 3.148438 L 18.441406 2.148438 L 17.417969 1.140625 L 14.117188 1.140625 Z 
            M13.09375 2.148438
        `
    

我们可以调用：

import iconsSVG from "./PlatformIcons";
import SvgIcon from '@material-ui/core/SvgIcon';

//...
let platform = "PC";
<SvgIcon titleAccess=platform>
     <path d=iconsSVG[platform] />
</SvgIcon>
//...

提前致谢

编辑：如果需要，这是我的完整 Card 组件实现：

    import React from "react";
    import useTranslation from "react-i18next";
    
    import  makeStyles  from '@material-ui/core/styles';
    
    import Link from 'react-router-dom';
    
    import Card from "@material-ui/core/Card";
    import CardMedia from "@material-ui/core/CardMedia";
    import CardActions from "@material-ui/core/CardActions";
    
    import IconButton from "@material-ui/core/IconButton";
    import YouTubeIcon from '@material-ui/icons/YouTube';
    import PlayArrowIcon from '@material-ui/icons/PlayArrow';
    
    import Tooltip from '@material-ui/core/Tooltip';
    
    const useStyles = makeStyles((theme) => (
        localVideoPlayerButton : 
            [theme.breakpoints.down('sm')]: 
                display: "none"
            
        ,
        gameCover: 
            [theme.breakpoints.between('xs', 'md')]: 
                height: 200
            ,
            [theme.breakpoints.up('md')]: 
                height: 150
            ,
        ,
        gameControls : 
            display: 'flex',
            justifyContent: 'center',
            paddingLeft: theme.spacing(1),
            paddingBottom: theme.spacing(1),
        
    ));
    
    function CardEntry(props) 
    
        const game = props;
        const  t  = useTranslation('common');
        const classes = useStyles(props);
    
        return (
            <Card>
    
                <CardMedia
                    component="img"
                    className=classes.gameCover
                    image=game.imagePath
                    title=game.title
                />
    
                <CardActions className=classes.gameControls>
    
                    <Tooltip title=t("gamesLibrary.actionsButton.watchHere",  "gameName": game.title) aria-label="Watch" className=classes.localVideoPlayerButton>
                        <IconButton
                            aria-label="play"
                            component=Link
                            to=
                                game.url_type === "PLAYLIST" ? "/playlist/" + game.playlistId : "/video/" + game.videoId
                            
                        >
                            <PlayArrowIcon/>
                        </IconButton>
                    </Tooltip>            
    
                    <Tooltip title=t("gamesLibrary.actionsButton.watchOnYt",  "gameName": game.title) aria-label="WatchOnYoutube">
                        <IconButton
                            aria-label="share"
                            href=game.url
                        >
                            <YouTubeIcon/>
                        </IconButton>
                    </Tooltip>
                </CardActions>
    
            </Card>
        );
    
    
    export default CardEntry;

通过我可以提供给该内容的数据示例：

    
      "title": "Mafia: Definitive Edition",
      "playlistId": "PLRfhDHeBTBJ6SEXdQnTM4OHRH9mDIRocv",
      "releaseDate": "2020-09-24T22:00:00.000Z",
      "duration": "06:59:14",
      "genres": [
        "Action",
        "Adventure",
        "Shooter"
      ],
      "platform": "PC",
      "imagePath": "https://jy95.github.io/yt_gaming_library/covers/PLRfhDHeBTBJ6SEXdQnTM4OHRH9mDIRocv/cover.webp",
      "url": "https://www.youtube.com/playlist?list=PLRfhDHeBTBJ6SEXdQnTM4OHRH9mDIRocv",
      "url_type": "PLAYLIST",
      "durationAsInt": 65914
    

【参考方案1】：

使用这个布局：

<Card className=classes.root>// with position releative
  <IconButton
    aria-label="console"
    className=classes.rightChip// with absolute position and z-index
    onClick=handleConsole// ur console button for showing all pc games
  >
    // ur pc icon
  </IconButton>
  <Typography variant="body2" color="textSecondary" 
     component="p"className=classes.timer>//also with absolute position and z-index
    //ur timer
  </Typography>
  <CardActionArea onClick=clickHandler>
    <CardMedia
      component="img"
      className=classes.gameCover
      image=game.imagePath
      title=game.title
    />
  </CardActionArea>
</Card>

CodeSandBox

【讨论】：

我看到了很多修改，所以我会等待完整的版本，这样我们就可以在类似代码和框的平台上检查它（React Material UI 在其文档中使用）

@jy95 检查codesandbox.io/s/condescending-ride-38479?file=/src/App.js

谢谢，它几乎是完美的：我希望平台在左角成一个盒子（平台可能难以阅读一些封面）

@jy95 您可以使用我为您制作的课程添加样式！将backgroundColor 添加到平台类。我给你换！

前端及其乐趣 ^^ 无论如何感谢您的帮助