有条件地覆盖Style标签中的css

Question

假设我使用的是在运行时生成html的插件，我无法编辑CSS或JS代码，只留下覆盖某些CSS的唯一选项特别是班级。例如，在这种情况下，我经常这样做：

.video-player{
   max-height: 500px !important;
}

如果必须根据道具传递给组件有条件地处理这种样式，例如：

<videoPlayer :goSmall="anotherColumn != null"></videoPlayer> 

因为CSS组件中的videoPlayer必须放在Style标记中：

<style scoped>
   .video-player{
       max-height: 500px !important;
   }
</style>

如何有条件地渲染它？

使用生命周期挂钩将它附加到DOM是一个坏主意，所以请不要提出类似的建议。

Answer 1

为什么不将特定的类应用于组件而不是传递prop？

<videoPlayer :class="{ small: anotherColumn != null }"></videoPlayer>

和css

<style scoped>
.video-player.small {
   max-height: 500px !important;
}
</style>

Answer 2

如果您不能使用生命周期钩子动态应用CSS。您可以随时装箱。为videoPlayer制作两个组件，我们将其称为videoPlayerOriginal和videoPlayerSmall。

//videoPlayerOriginal.vue
<videoPlayer></videoPlayer> 

在videoPlayerSmall.vue

中添加您的CSS

//videoPlayerOriginal.vue
<videoPlayer></videoPlayer>

<style scoped>
 .video-player{
    max-height: 500px !important;
  }
</style>

现在有条件地渲染其中一个。