Vue中基于断点使用CSS类答案

【问题标题】：Use CSS classes in Vue based on breakpointsVue中基于断点使用CSS类
【发布时间】：2020-09-03 09:15:42
【问题描述】：

我已经尝试使用基于断点的 vuetify 类，它可以工作

<v-app :class="{'yellow': !$vuetify.breakpoint.xs}">

我在 vue 文件中有一个名为 pagemargin 的类但是当我使用这个类时它不起作用，如下例所示

<v-app :class="{'pagemargin': !$vuetify.breakpoint.xs}">

为什么不工作？

<style >
.pagemargin{
  margin-right: 100px;
  margin-left: 100px;
  color: red;
}
</style>

【问题讨论】：

类是否附加到元素并且样式不起作用？
是的样式不起作用
那么您确定该类已添加到 DOM 中的元素中？
是的，尝试添加答案中提到的!important，您的样式可能会被其他一些矿石定义的样式覆盖
它现在正在工作，

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

将!important 添加到您的样式中。 Vuetify 将其默认样式添加到整个 v-app，因此您需要覆盖它。

.pagemargin{
  margin-right: 100px !important;
  margin-left: 100px !important;
  color: red !important;
}

【讨论】：

感谢您的帮助，我刚刚删除了文件并在一个新文件中尝试了它，它正在使用我之前编写的代码
很高兴它成功了。如果此答案或任何答案解决了您的问题，请单击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。

【解决方案2】：

使用!important 可能会奏效，但从长远来看，随着您的应用程序变得越来越大，它的成本可能会很高。相反，您应该通过提供比 Vuetify 具有更高特异性的 CSS 来解决这个问题。我给你举个例子：

<template>
  <div class="my-div">
    <v-btn :class="{'my-padding': !$vuetify.breakpoint.xs}" tile outlined color="success">
      View
    </v-btn>
  </div>
</template>

<style>
 /* this wont work */
.my-div .my-padding {
  padding-right: 200px;
  padding-left: 200px;
}

/* this works */
.my-div .v-btn.my-padding {
  padding-right: 200px;
  padding-left: 200px;
}
</style>

<style scoped>
/* this also works */
.my-div .my-padding {
  padding-right: 200px;
  padding-left: 200px;
}
</style>

您可以阅读更多关于特异性的信息here。

【讨论】：