为什么在nuxt页面中，范围内的样式不能被加载？

Question

我在一个nuxt网站上有两个freshsales表单作为单独的组件（比如说formA和formB），我写了一些样式，覆盖了这些表单组件的默认样式，但是当我在一个页面中使用它们时，这些样式没有被加载和应用。

如果我试着在没有作用域的情况下使用同样的样式，我得到的是样式被应用，但是在任何使用formB组件的页面中，formA的样式都被应用了（这在nuxtvue应用中是意料之中的）。

为什么我的scoped样式不能工作？

我将留下下面的示例代码。

/contactForm.vue/xxx指的是唯一的ID。

<template>
  <div>
    <script
      src="https://facilio.freshsales.io/web_forms/xxxxxx/form.js"
      crossorigin="anonymous"
      id="xxxxx"
    ></script>
  </div>
</template>
<style scoped>

.fserv-form {
  border-radius: 10px;
  padding: 20px;
  position: relative;
  font-family: Arial, sans-serif;
}
.fserv-field:nth-child(3){
  width: 187px;
  padding-right: 5px;
  display: inline-block;
}
.fserv-field:nth-child(5){
   width: 140px;
   padding: 0;
  display: inline-block;
}
@media screen and (max-width: 360px) {
  .fserv-field:nth-child(3) {
    width: 135px;
  }
  .fserv-field:nth-child(5) {
    width: 110px;
  }
}
@media screen and (max-width: 986px) and (min-width: 525px){
   .fserv-field:nth-child(3),.fserv-field:nth-child(5) {
  width: 100%;
  padding: 0 30px/*! * Datetimepicker for Bootstrap 3 * ! version : 4.7.14 * https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
  display: block;
   }
}
</style>

/register.vue

  <template>
          <div>
            <script
              src="https://facilio.freshsales.io/web_forms/xxxxxx/form.js"
              crossorigin="anonymous"
              id="xxxxx"
            ></script>
          </div>
        </template>
    <style scoped>

.fserv-form {
  border-radius: 10px;
  padding: 20px;
  position: relative;
  font-family: Arial, sans-serif;
}
.fserv-field{
  padding: 40px !important;
}
.fserv-field:nth-child(3){
  width: 187px;
  padding-right: 5px;
  display: inline-block !important;
}
.fserv-field:nth-child(4){
   width: 140px;
   padding: 0;
  display: inline-block !important;
}
@media screen and (max-width: 360px) {
  .fserv-field:nth-child(3) {
    width: 135px;
  }
  .fserv-field:nth-child(4) {
    width: 110px;
  }
}
@media screen and (max-width: 986px) and (min-width: 525px){
   .fserv-field:nth-child(3),.fserv-field:nth-child(4) {
  width: 100%;
  padding: 0 30px/*! * Datetimepicker for Bootstrap 3 * ! version : 4.7.14 * https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
  display: block;
   }
}
</style>

我试图在两个不同的页面中使用这些组件，但问题是，如果我将样式设置为scoped，则不会应用scopes样式，如果我删除scoped，则会在两个页面中应用联系表单样式。

有什么合适的方法可以做到这一点，我希望每个表单的样式都被单独应用（就像我用css选择器选择字段一样）。.fserv-field:nth-child(4)).

或者有什么更好的方法来选择表格字段而不冲突.字段顺序将像3,4（在contactForm）而3,5。(在注册表中)

谢谢！我在一个nuxt网站上有两个freshsales表单作为独立的组件（比如formA和formB），我写了一些样式，覆盖了这些表单组件的默认样式。

Answer 1

你应该使用 >>> Vue提供的操作员。它允许您在使用任何子组件时，对其进行样式设计。scoped 并且不产生任何冲突。文件链接.

所以你的代码变成了

<template>
  <div>
    <script
      src="https://facilio.freshsales.io/web_forms/xxxxxx/form.js"
      crossorigin="anonymous"
      id="xxxxx"
    ></script>
  </div>
</template>
<style scoped>

>>> .fserv-form {
  border-radius: 10px;
  padding: 20px;
  position: relative;
  font-family: Arial, sans-serif;
}
>>> .fserv-field:nth-child(3){
  width: 187px;
  padding-right: 5px;
  display: inline-block;
}
>>> .fserv-field:nth-child(5){
   width: 140px;
   padding: 0;
  display: inline-block;
}
@media screen and (max-width: 360px) {
  >>> .fserv-field:nth-child(3) {
    width: 135px;
  }
  >>> .fserv-field:nth-child(5) {
    width: 110px;
  }
}
@media screen and (max-width: 986px) and (min-width: 525px){
   >>> .fserv-field:nth-child(3),.fserv-field:nth-child(5) {
       width: 100%;
       padding: 0 30px/*! * Datetimepicker for Bootstrap 3 * ! version : 4.7.14 * 
       https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
       display: block;
   }
}
</style>

和

<template>
          <div>
            <script
              src="https://facilio.freshsales.io/web_forms/xxxxxx/form.js"
              crossorigin="anonymous"
              id="xxxxx"
            ></script>
          </div>
        </template>
    <style scoped>

>>> .fserv-form {
  border-radius: 10px;
  padding: 20px;
  position: relative;
  font-family: Arial, sans-serif;
}
>>> .fserv-field{
  padding: 40px !important;
}
>>> .fserv-field:nth-child(3){
  width: 187px;
  padding-right: 5px;
  display: inline-block !important;
}
>>> .fserv-field:nth-child(4){
   width: 140px;
   padding: 0;
  display: inline-block !important;
}
@media screen and (max-width: 360px) {
  >>> .fserv-field:nth-child(3) {
    width: 135px;
  }
  >>> .fserv-field:nth-child(4) {
    width: 110px;
  }
}
@media screen and (max-width: 986px) and (min-width: 525px){
   >>> .fserv-field:nth-child(3),.fserv-field:nth-child(4) {
  width: 100%;
  padding: 0 30px/*! * Datetimepicker for Bootstrap 3 * ! version : 4.7.14 * https://github.com/Eonasdan/bootstrap-datetimepicker/ */;
  display: block;
   }
}
</style>