Css 视频覆盖不适用于reactjs样式的组件

我正在试着给背景中播放的视频添加一个覆盖.然而，由于某种原因，覆盖似乎没有显示出来.我做错了什么？下面是以下代码:是的，我确实理解我在每个组件中都有背景 colored颜色 元素，这是我试图让覆盖显示出来的.

import React from 'react'; 
import styled from 'styled-components'; 
import VideoBg from '../assets/landing-page-video-1.webm';

const Home = () => {
  return ( 
    <VideoContainer> 
        < Overlay className="overlay">  
         <video className="BgVideo"src={VideoBg} autoPlay loop muted />  
         </Overlay> 
     
    </VideoContainer> 
    
  )
}

const Overlay = styled.div `
 & .overlay{
    z-index: 1; 
    position: absolute; 
    width: 100%;
    height: 100%; 
    top: 0;  
    left: 0;  
    background-color: rgba(0,0,0,.1) !important;

    
 }
`

const VideoContainer = styled.div ` 
& .BgVideo{  
    z-index: 1;
    bottom:0; 
    top:0; 
    right:0; 
    left:0; 
    width: 100Vw; 
    height: 100vh; 
    object-fit: cover; 
    object-position: center; 
    margin-top: 0;  
    position:fixed;     
    background-color: rgba(0,0,0,.1) !important;

};  
bottom:0; 
left:0; 
margin: 0; 
padding: 0; 
font-family: Impact; 
min-width: 100%; 
min-height: 100vh; 
right:0; 
top:0; 
z-index: -1; 
background-color: rgba(0,0,0,.1) !important;`
`

我只是试着在视频上加一个黑色的覆盖层，因为我计划在视频上加文字