如何将覆盖文本添加到模糊反应组件

Question

我正在React and Material ui中开发一个应用程序，该应用程序使用卡组件来显示一些信息。然而，我不是最擅长CSS的，在为Card组件创建覆盖时遇到了困难，因为它被模糊了。我使用css属性filter: blur(2px)来实现模糊，但每当我为覆盖添加任何css时，它要么将文本放在上面的卡片下面。我的目标是让它集中在卡片的中间。

代码：

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;

Answer 1

这就足够了。只需将网格项设置为固定位置即可。您可能需要添加z索引。但在你的例子中，这是不需要的。

我还建议将">不可选择"添加到模糊内容中，这样用户就无法选择它。

https://codesandbox.io/s/flamboyant-volhard-72wuh?fontsize=14&隐藏导航=1&主题=深色

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;