Vue.js 您将如何处理Vue应用程序中的不同主题？

我认为基于所选主题的动态风格是最好的选择，但我想知道是否有人对此有其他想法。我正在使用Vuex存储主题名称的状态

有没有办法让组件根据全局状态使用不同的样式表？

假设您有themeA和themeB，并使用Vuex存储这些值。因此，我将这些主要类放在主组件中，比如说，放在app.vue中，比如：

这样就行了

<div id="app" v-bind:class="{ 'theme-a': isThemeA, 'theme-b': isThemeB} "></div>

<template>
  <div id="some-component">
    <!-- your markup -->
  </div>
</template>

<script>
  export default {
    name: 'some-component'
  }
</script>

<style lang="scss">
  .theme-a {
    .some-selector { //styles for theme A }
  }

  .theme-b {
    .some-selector { //styles for theme B }
  }
</style>