Chat social Nuxt et Vue

Question

J'ai installé le module de chat social Vue dans mon application Nuxt mais je n'arrive pas à comprendre comment fonctionnent les accessoires et les paramètres de couleur. Actuellement, tout fonctionne bien, même si l'icône Whatsapp affichée est noire et la barre supérieure se trouve à l'intérieur de la bulle. Comment puis-je modifier ce paramètre dans Nuxt. L'auteur dit d'utiliser des variables CSS mais je ne sais pas où mettre ces variables et comment les utiliser dans mon code.

Nuxt n'a pas non plus App.vue, j'ai donc importé le module directement, ce qui semble fonctionner, mais je ne suis pas sûr de le faire correctement.

Voici à quoi ressemble ma page default.vue actuelle. Je n'importerai pas ce module ailleurs.

<template>
  <v-app dark>
    <v-main>
      <Nuxt />
    </v-main>
    <div>
      <SocialChat
        icon
        :attendants="attendants"
      >
        <p slot="header" >Chat to us on whatsapp for any question, or sales related topics.</p>
        <template v-slot:button>
          <img
            src="https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/icons/whatsapp.svg"
            alt="icon whatsapp"
            aria-hidden="true"
          >
        </template>
        <small slot="footer">Opening hours: 8am to 6pm</small>
      </SocialChat>
    </div>
  </v-app>
</template>

<script>
import { SocialChat } from 'vue-social-chat'

export default {
  name: 'DefaultLayout',
  components: {
    SocialChat
  },
  data() {
    return {
      attendants: [
        {
          app: 'whatsapp',
          label: '',
          name: '',
          number: '',
          avatar: {
            src: '',
            alt: ''
          }
        },
        // ...
      ],
    }
  },
}
</script>

<style>
.container {
  max-width: 1200px;
}
</style>

Answer 1

C'est principalement pour les besoins généraux

sssccc

On pourrait aussi utiliser --vsc-bg-button: Pink !important; 来代替 :root #social-button des sélecteurs CSS, mais je n'aime pas casser la spécificité du CSS.
De plus, le style peut être scoped mais cela n'a de toute façon aucune signification réelle puisque vous n'aurez aucun problème de portée ici.

Le référentiel github peut être trouvé ici : https://github.com/kissu/vue-social

Un exemple fonctionnel d'hébergement est disponible ici : https://so-vue-social.netlify. Candidatures/