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

【问题标题】：How to override third party default styles using Styled Components如何使用样式化组件覆盖第三方默认样式
【发布时间】：2021-03-03 19:27:10
【问题描述】：

我目前正在使用 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% 的宽度和高度。有什么想法吗？

【问题讨论】：

您不需要为此使用样式组件，因为播放器接受 width 和 height 道具。为了使百分比维度起作用，他们的父母也需要设置他们的维度：stackoverflow.com/questions/5657964/…
@Clarity 我有一个设置为 100% 宽度和高度的父容器。 videoPlayer 似乎只适用于固定值。当我在道具中将其“高度”和“宽度”设置为百分比或“自动”时，它不会做任何事情。
@Clarity 因此我要求覆盖默认样式以及如何做到这一点。我认为需要将“位置”覆盖为相对才能使用百分比。

【解决方案1】：

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

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

【讨论】：