时间戳

首页 > 解决方案 > 如何使用样式化组件覆盖第三方默认样式

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

问题描述

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

因为 VideoPlayer 只是 VideoJS 的 React 包装器。我假设样式和类名是相同的。我试着做这样的事情：

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

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

在 props 中设置高度和宽度为 100% 不起作用

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

父容器设置为 100% 的宽度和高度。有任何想法吗？

标签： reactjsvideo.jsreact-player

解决方案

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

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

推荐阅读