我的 q-btn 元素在 Quasar 中没有正确渲染

Question

我是 Quasar 的新手，我不知道为什么，但我的 q-btn 组件按钮有时会呈现为白色背景，忽略了我使用外部样式表添加到其中的 background-color。

以下是这个莫名其妙的问题的例子

上面的按钮应该如下所示

另一个例子是

上面的应该是这样的

按钮有时会正确呈现，但就像那样，没有任何清晰的图案，它们会以白色背景呈现。

有人认为发生这种情况的原因是因为在解析外部 scss 文件之前正在呈现按钮。我改变了从

导入外部scss文件的风格

<template>
...
</template>

<script>
  import './_custom-style.scss // initial import style
  ...
</script>

到

<template>
 ...
</template>

<script>
 ...
</script>

<style lang="scss" src="./_custom-style.scss"></style> // new css import style

这不起作用。

有人建议我使用 q-btn's color 道具，（这不太理想，因为我无法为我的背景使用自定义十六进制颜色），但是我尝试将颜色道具添加到它，使用类星体的一种颜色（在调色板中），它仍然不能一直正确渲染。我不知道还能做什么。

编辑：

这些是 scss 文件和使用 q-btn 组件的模板之一。

airtime {
  ...
  &__redeem-btn {
    margin-top: 1rem;
    width: 80%;
    padding: .5rem;
    background-color: $purple-dark-3;
    color: $primary-white;
    font-size: 1.7rem;
  }
}

<template>
  <div class="airtime text-center">
    <h1 class="..">Congratulations!</h1>
    <p class="..">You got <strong>7</strong> questions correct</p>

    <q-img
      src="icons/...svg"
      transition="fade"
      class=".."
      alt=".."
    />
    <p class=".."></p>
    <q-btn
      class="airtime__redeem-btn" 
      rounded 
      label="Redeem" 
      no-caps
      @click="$emit('selectNetworkProvider')"
    />
  </div>
</template>

Answer 1

我发现了错误。事实证明，我的应用程序中存在冲突的风格

.q-btn__wrapper {
  background-color: $primary-white;
}

此样式覆盖了q-btn 组件中的background-color。