vuejs2 - Vuetify主题设置在Storybook中不起作用

(Vue版本-2，Vuetify和Storybook-最新)

考虑以下简单的按钮组件:

<template>
  <v-btn round
    color="primary">
    <slot></slot>
  </v-btn>
</template>

<script>
export default {
  name: "test-button",
}
</script>

在App组件文件中，它的调用方式如下:

  <v-app>
    <v-layout column justify-center>
      <v-layout row justify-center align-center>
         <test-button @click="testBtnClicked">
           Click It
         </test-button>
      </v-layout>
    </v-layout>
  </v-app>

Vuetify设置在main.js中如下所示:

import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from "vuetify";
import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, {
  theme: {
    primary: colors.indigo.base,
    info: colors.blue.lighten2,
    accent: colors.green.lighten1,
    error: colors.red.darken2
  }
});

到目前为止，一切都很好-在框架中间，我得到了一个不错的靛蓝按钮，这正是我所期望的。

现在，在Storybook配置中，我使用与main.js中相同的行来设置Vuetify，并且我的Storybook文件如下所示:

import { storiesOf } from "@storybook/vue";

import TestButton from "./TestButton.vue";

storiesOf("TestButton", module)
  .add("button template", () => ({
    template: '<test-button :rounded="true">round</test-button>',
    components: {TestButton}
  }))

这样就可以在Storybook中渲染按钮，但是主题设置不会发生，例如:按钮不是靛蓝色，而是白色。其余的Vuetify属性似乎还不错-看起来像一个Vuetify圆形按钮，带有白色文本。

我不确定这是Vuetify问题还是Vue问题或Storybook问题(或我方面的用户错误问题)。如果有人这样做，我将不胜感激。

这是我的webpack.config.js(在.storybook中):

module.exports = (baseConfig, env, defaultConfig) => {

  defaultConfig.plugins.push(new VueLoaderPlugin());

  return defaultConfig;
};

最佳答案

我也有问题

阅读vuetify的代码后，似乎是CSS的生成，并且在这里的VApp mixin app-theme中注入(inject)了主题。

因此，我认为问题并不与故事书有关，而应与事实相关。

通过包装我希望使用v-app进行测试的组件，就可以了。

因此，现在，请尝试像这样在config.js中添加装饰器:

import { configure, addDecorator } from '@storybook/vue';
import 'vuetify/dist/vuetify.css';

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify, {
  theme: {
    // your colors
  },
});

addDecorator(() => ({
  template: '<v-app><story/></v-app>',
}));

...

听起来还好吗？

(也在github上回答:https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778)