Vue-Material切换主题(属性'material‘在类型'Vue’上不存在)

Question

我有创建和加载vue-typescript vs 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'

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

在这个链接上，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

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

@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