Javascript 如何将覆盖文本添加到组件？

我正在React和materialui中开发一个应用程序，它使用一个卡片组件来显示一些信息。然而，我并不擅长CSS，我在为卡片组件创建一个覆盖层时遇到了困难，因为它是模糊的。我使用css属性

filter:blur（2px）

来完成模糊，但是每当我为叠加添加css时，它要么将文本放在上面的卡片下面。我的目标是把它集中在卡的中间。< /P> 代码：

import { Grid, Typography, CardContent, Card } from '@material-ui/core';
import { makeStyles, useTheme } from '@material-ui/core/styles';



const useStyles = makeStyles(theme => ({

    root:{
        width: 400,
        filter: "blur(3px)",
    },

    textOverlay: {
        position: 'absolute',
        top: 0,
        left: 0
    }

}));

const LandingPage = () => {


const classes = useStyles();

    return (
         <React.Fragment>
           

            <Grid container direction="row" alignItems="center" justify="center">
                

                <Grid item>
                    <Card className={classes.root}>
                        <CardContent>
                            <Typography variant="h4" align="center" >Monday</Typography>

                            <Typography>Song</Typography>
                            <Typography>Africa</Typography>

                            <Typography>Artist</Typography>
                            <Typography>Toto</Typography>

                            <Typography>Preview</Typography>
                        </CardContent>
                    </Card>
                </Grid>

                <Grid item>
                   <div className={classes.textOverlay}> Coming Soon </div>
                </Grid>

            </Grid>


     

        </React.Fragment>

    );
}



export default LandingPage;

从'@material ui/core'导入{Grid，排版，CardContent，Card}；
从“@materialui/core/styles”导入{makeStyles，useTheme}；
const useStyles=makeStyles（主题=>({
根目录：{
宽度：400，
过滤器：“模糊（3px）”，
},
文本覆盖：{
位置：'绝对'，
排名：0，
左：0
}
}));
常数着陆页=（）=>{
const classes=useStyles（）；
返回(
星期一
歌曲
非洲
艺术家
托托
预览
马上就来
);
}
导出默认登陆页面；

这应该可以做到。只需将网格项设置为“位置固定”。您可能需要添加z索引。但在你的例子中，它是不需要的

我还建议在模糊内容中添加“notselective”，以便用户无法选择

从“React”导入React；
从“@material ui/core”导入{网格、排版、卡片内容、卡片}；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles（（主题）=>({
根目录：{
宽度：400，
过滤器：“模糊（3px）”，
},
文本覆盖：{
位置：“固定”，
}
不可选择：{
用户选择：“无”
}
}));
常数着陆页=（）=>{
const classes=useStyles（）；
返回(
星期一
歌曲
非洲
艺术家
托托
预览
马上就来
);
};
导出默认登陆页面；

您能否提供一个屏幕截图，说明您得到了什么以及您期望得到什么

import React from "react";
import { Grid, Typography, CardContent, Card } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    width: 400,
    filter: "blur(3px)",
  },

  textOverlay: {
    position: "fixed",
  }

  notSelectable: {
    userSelect: "none"
  }
}));

const LandingPage = () => {
  const classes = useStyles();

  return (
    <React.Fragment>
      <Grid container direction="row" alignItems="center" justify="center">
        <Grid item>
          <Card className={classes.root}>
            <CardContent className={classes.notSelectable}>
              <Typography variant="h4" align="center">
                Monday
              </Typography>

              <Typography>Song</Typography>
              <Typography>Africa</Typography>

              <Typography>Artist</Typography>
              <Typography>Toto</Typography>

              <Typography>Preview</Typography>
            </CardContent>
          </Card>
        </Grid>

        <Grid item className={classes.textOverlay}>
          <div> Coming Soon </div>
        </Grid>
      </Grid>
    </React.Fragment>
  );
};

export default LandingPage;