Sembang sosial Nuxt dan Vue

Question

Saya memasang modul sembang sosial Vue ke dalam apl Nuxt saya tetapi tidak dapat memahami cara tetapan prop dan warna berfungsi. Pada masa ini, semuanya berfungsi dengan baik, walaupun ikon Whatsapp yang ditunjukkan berwarna hitam dan bar atas berada di dalam gelembung pertuturan. Bagaimanakah saya akan menukar tetapan ini dalam Nuxt. Penulis berkata untuk menggunakan pembolehubah css tetapi saya tidak tahu di mana untuk meletakkan pembolehubah ini dan cara menggunakannya dalam kod saya.

Nuxt juga tidak mempunyai App.vue, jadi saya mengimport modul secara langsung, yang nampaknya berfungsi, tetapi saya tidak pasti sama ada saya melakukannya dengan betul.

Beginilah rupa halaman default.vue semasa saya. Saya tidak akan mengimport modul ini di tempat lain.

<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

Ini terutamanya untuk keperluan keseluruhan

sssccc

Kami juga boleh menggunakan --vsc-bg-button: Pink !important; 来代替 :root #social-button pemilih CSS, tetapi saya tidak suka memecahkan kekhususan CSS.
Selain itu, gayanya boleh scoped tetapi tidak ada maksud sebenar di sini kerana anda tidak akan menghadapi sebarang isu skop di sini.

Repositori github boleh didapati di sini: https://github.com/kissu/vue-social

Contoh pengehosan yang berfungsi tersedia di sini: https://so-vue-social.netlify. Permohonan/