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

【问题标题】：The css I add to the v-checkbox affects the css of the v-checkboxes on other pages我添加到 v-checkbox 的 css 会影响其他页面上 v-checkboxes 的 css
【发布时间】：2021-06-27 10:24:35
【问题描述】：

我在 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 在两个页面上都处于活动状态。

【问题讨论】：

你使用scoped样式了吗？

标签： css vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

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

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

你可以阅读更多关于本地和全球风格here

【讨论】：