有条件地覆盖样式标签中的 css答案

【问题标题】：Conditionally override css in Style tag有条件地覆盖样式标签中的 css
【发布时间】：2018-09-22 12:27:04
【问题描述】：

假设我使用的插件在运行时生成html，而我无法编辑CSS 或JS 代码，这让我只能选择覆盖特定类中的某些CSS。例如，在这种情况下，我经常会这样做：

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

如果必须根据传递给组件的 props 有条件地处理此类样式，例如：

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

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

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

如何有条件地渲染它？

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

【问题讨论】：

使用生命周期钩子动态应用 CSS 有什么问题？，我假设您需要将 videoPlayer 组件视为黑盒
@AbhishekGupta：问题在于，它的影响覆盖了整个 dom，我也必须负责删除。一种方法是传统上使用 JQuery 将样式添加到特定 div，但我想了解 Vue 解决方案。

【解决方案1】：

为什么不给组件应用一个特定的类而不是传递一个prop？

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

还有css

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

【讨论】：

【解决方案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>

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

【讨论】：