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

Question

我是运行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>

这应该会根据下面的 link 将工具栏变为绿色，但它不会。

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

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

Answer 1

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

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

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

How can I change the main toolbar color in Quasar?

quasar-framework