我添加到 v-checkbox 的 css 会影响其他页面上 v-checkboxes 的 css

Question

我在一个 vue js 项目的不同页面的表格中使用了一个 v-checkbox。

我在x页上用的css

.v-input__slot {
  align-items: center;
  justify-content: center;
}
.v-input--selection-controls {
  padding-left: 41%;
}

我在y页上用的css

.v-input__slot  {
  align-items: center;
  justify-content: center;
}
.v-input--selection-controls {
  padding-left: 15%;
}

当我从第 x 页移动到第 y 页时，第 x 页上的 css 留在第 y 页上。当我从第 y 页切换到第 x 页时，也会发生同样的事情。我怎样才能避免这种情况

X 页面的 css 在两个页面上都处于活动状态。

Answer 1

您应该在页面的 style 中添加关键字 scoped，以便为您的组件创建本地样式。例如：

 <style scoped>
     .v-input__slot {
        align-items: center;
        justify-content: center;
     }
     .v-input--selection-controls {
        padding-left: 41%;
     }
 </style>

您可以阅读有关本地和全局样式的更多信息here

我添加到 v-checkbox 的 css 会影响其他页面上 v-checkboxes 的 css

The css I add to the v-checkbox affects the css of the v-checkboxes on other pages

css

vue.js

vue-component

vuejs2

vuetify.js