您将如何处理 Vue 应用程序中的不同主题？ [关闭]答案

【问题标题】：How would you handle different themes in a Vue app? [closed]您将如何处理 Vue 应用程序中的不同主题？ [关闭]
【发布时间】：2018-11-01 16:49:27
【问题描述】：

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

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

【问题讨论】：

标签： vue.js sass vuejs2 vue-component

【解决方案1】：

假设你有 themeA 和 themeB，你用 Vuex 存储这些值。所以，我会把这些主要类放在主要组件中，比如说，#app (App.vue)，比如：

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

在 Vuexs getter 中，您可以获得这些状态的布尔值。

稍后，在SomeComponent.vue 中，我会使用theme-* 选择器来设置它们的样式：

<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>

这样就可以了。

【讨论】：