为什么范围样式没有加载到 nuxt 页面中？

Question

我在 nuxt 网站中有两个作为单独组件的新销售表单（比如 formA 和 formB）。我编写的样式覆盖了默认表单样式，这些样式的范围仅限于这些表单组件。但是当我在页面中使用它们时，范围样式没有被加载和应用。

如果我在不设置范围的情况下尝试相同的操作，我会应用样式。但是 formA 样式也适用于使用 formB 组件的任何页面。（对于 nuxt/vue 应用程序而言，这是预期的）。

为什么我的作用域样式不起作用？

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

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

我正在尝试在两个不同的页面中使用这些组件。但问题是，如果我将样式设置为范围，则不会应用范围样式。如果我删除了范围，我会同时获得联系表单样式应用的页面。

任何适当的方法来做到这一点。我希望为每个表单单独应用样式（就像我使用 css 选择器 .fserv-field:nth-child(4) 选择这样的字段）。

或者有没有更好的方法来选择表单字段而不会发生冲突。字段顺序类似于 3,4（在 contactForm 中）而 3,5。 （在注册表中）

谢谢！

Answer 1

您应该使用 Vue 提供的 >>> 运算符。它将允许您在使用scoped 时设置任何子组件的样式，并且不会产生任何冲突。 Documentation link.

所以你的代码变成了

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