如何更改 Quasar 中的主工具栏颜色？答案

【问题标题】：How can I change the main toolbar color in Quasar?如何更改 Quasar 中的主工具栏颜色？
【发布时间】：2020-05-05 23:43:04
【问题描述】：

我正在运行 quasar 1.7.2，当我去更改基本示例应用程序中主工具栏的颜色时，它不会改变。如果我去 MainLayout.vue 我在文件顶部附近有以下代码

    <q-header elevated>
      <q-toolbar color = "green-8">


        <q-btn

          flat
          dense
          round
          color = "green-8"
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          Del Norte FIU 1
        </q-toolbar-title>



        <div>Serial: 6654521</div>


      </q-toolbar>
    </q-header>

根据下面的链接，这应该将工具栏变为绿色，但事实并非如此。

https://v0-17.quasar-framework.org/components/toolbar.html

奇怪的是，将按钮颜色修改为 green-8 的行确实对按钮有效。

【问题讨论】：

标签： quasar-framework

【解决方案1】：

您需要使用bg-green-8 类。开始标签应类似于 <q-toolbar class="bg-green-8"> 以将颜色更改为绿色。

Codepen - https://codepen.io/Pratik__007/pen/bGVLbJQ

【讨论】：