Question

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

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

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

哪种方法可以正常使用。

你会如何处理Vue应用程序中的不同主题？

1 个答案: