Reactjs 如何使用样式化组件覆盖第三方默认样式

我目前正在使用react video js player中的VideoPlayer，我正在尝试覆盖默认的高度/宽度样式，以使视频继承父级的高度/宽度

因为VideoPlayer只是VideoJS的反应包装器。我假设样式和类名是相同的。 我试过这样做：

import VideoPlayer from "react-video-js-player"

export const VideoJS = styled(VideoPlayer)`
position: relative;
height: 100%;
`

在道具中将高度和宽度设置为100%不起作用

   <VideoPlayer
       controls="true"
       height={"100%}
       width={"100%"}
       src="examplevideo"
   />
. 

---

我会这样做，首先检查浏览器中的视频播放器元素，了解它的包装器是什么，比如说它是一个div。您可以这样做：

export const VideoPlayerWrapper= styled.div`
   >div{
   //this will target the videoPlayerwrapper 
   position: relative;
   height: 100%;
   }
`

您不需要为此使用样式化组件，因为玩家可以接受
宽度
和
高度
道具。要使百分比维度正常工作，其父级也需要设置其维度：@Clarity我有一个父级容器，该容器的宽度和高度设置为100%。视频播放器似乎只能使用固定值。当我在道具中将其“高度”和“宽度”设置为百分比或“自动”时，它不会做任何事情。@因此，我要求覆盖默认样式的原因和方法。我假设需要将“位置”覆盖为相对，这样才能使用百分比。