Vue-Material 切换主题（属性 'material' 在类型 'Vue 上不存在）

Question

我有在 vue-typescript 和 vue-material 中创建和加载主题的工作副本。

看起来像：

SCSS代码：

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: md-get-palette-color( lime, A200), // The primary color of your application
  accent: md-get-palette-color(green, 500), // The accent or secondary color
  secondary: #a10b4a,
  raised: #000000,
  theme: light
));

@import "~vue-material/dist/theme/all"; // Apply the theme

在app.vue中我只需要这一行：

  import './styles/style.scss'

现在我需要切换到另一个主题的方法。

关于这个link https://vuematerial.io/themes/concepts/没有基本的例子。

这个承诺：

错误日志：

16 16 Property 'material' does not exist on type 'Vue'.
    85 | 
    86 |     switchMyTheme = () => {
  > 87 |       this.$root.material.setCurrentTheme('myDark')
    85 | 
    86 |     switchMyTheme = () => {
  > 87 |       this.$root.material.setCurrentTheme('myDark')

有什么建议吗？

Answer 1

您可以在代码中切换主题，例如在 App.vue 中使用以下代码：

this.$material.theming.theme="differentTheme" //name of your theme

只需在应用主题之前导入引擎之间添加一个新主题：

@import "~vue-material/dist/theme/engine";

//Add here after import like:
@include md-register-theme("differentTheme", (
  primary: blue, 
  accent: red
));

//before applying
@import "~vue-material/dist/theme/all"; // Apply the theme

Vue-Material 切换主题（属性 'material' 在类型 'Vue 上不存在）

Vue-Material switch themes ( Property 'material' does not exist on type 'Vue )

themes

vue.js

vue-material