React中用MakeStyles实现仅模糊Grid背景而非内容的方法

直接给Grid元素添加filter: blur()会让整个元素（包括内部所有子组件）都被模糊——因为滤镜会作用于元素本身及其所有子内容。要实现仅背景模糊的效果，你可以用伪元素单独创建背景层，将模糊效果应用在伪元素上，同时让内容层级高于背景层即可。

修改后的样式代码 #

const useStyle = makeStyles((theme) => ({
  backgroundDescription: {
    position: 'relative', // 设置为相对定位，作为伪元素的定位容器
    zIndex: 1, // 确保内部内容在背景层上方
    '&::before': {
      content: '""',
      position: 'absolute',
      inset: 0, // 等价于top/left/right/bottom: 0，让伪元素铺满整个Grid容器
      backgroundColor: '#4040ff',
      filter: 'blur(10px)',
      zIndex: -1, // 将背景层置于内容下方，不遮挡内容
    },
  },
}));

JSX部分无需改动 #

保持原结构即可：

<Grid
  className={classes.backgroundDescription}
  item
  xs={12}
  md={6}>
  <div>
    <CourseDescription onLike={onLike} data={info} icon={icon} />
  </div>
</Grid>

方案原理 #

• 伪元素::before生成一个与Grid容器同大小的独立背景层，和内容完全分离
• z-index的层级设置确保背景层在内容下方，不会干扰内容的正常展示
• 模糊效果仅作用于伪元素（即背景层），内部的CourseDescription组件完全不受影响

你之前尝试的backdropFilter无效，是因为它模糊的是元素后方的外部内容，而非元素自身的背景；伪元素方案则是直接创建了一个带模糊效果的独立背景层，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者Lucas Salles