css - 翻转时钟 CDN 不会影响覆盖样式

Question

我正在尝试在我的 nuxt 项目中使用翻转时钟。它正在工作，但是当我尝试自定义样式时，它并没有反映所做的更改

HTML

<template>
  <div class="clock">
    <div id="flip-start" v-if="flipStart">
      <flip-clock @timer-stop="stopTimer"></flip-clock>
    </div>
  </div>
</template>

样式

.flip-clock-wrapper {
  width: auto;
  margin: auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100%;
}

.flip-clock-divider,
.flip-clock-label {
  color: #7e92b5 !important;
  font-size: 25px !important;
}

.flip-clock-wrapper ul {
  width: 100%;
  height: 100%;
  margin: auto !important;
}

我正在尝试特别更改翻转时钟标签

Answer 1

.flip-clock-label[data-v-f3eg9whatever]不存在 ;）

将全局 CSS 类放入其中，<style></style>并且仅将那些应该在组件范围内的类放入<style scoped></style>（您可以同时拥有两者）