Question

我想在vue文件的样式部分中使用在vuetify主题中定义的变量。它没有在文档中提及，而且似乎也找不到答案，有人知道怎么做吗？

例如

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
  }
})

现在要在我的Home组件中做

：

<template>
    <h1>My Title</h1>
</template>

<styles>
    h1{
        color:$primary; #from the vuetify theme
    }  
</styles>

Answer 1

您可以使用：

<style scoped>
  .something {
    color:            var(--v-primary-base);
    background-color: var(--v-accent-lighten2);
  }
</style>

从此列表中：

  --v-anchor-base: #c42742;
  --v-primary-base: #c42742;
  --v-primary-lighten5: #2c0447;
  --v-primary-lighten4: #cfa854;
  --v-primary-lighten3: #dd88cc;
  --v-primary-lighten2: #b49921;
  --v-primary-lighten1: #f899c7;
  --v-primary-darken1: #0169dc;
  --v-primary-darken2: #c28fd0;
  --v-primary-darken3: #fbe002;
  --v-primary-darken4: #33303a;

如何在样式中使用vuetify主题变量

1 个答案: