CODEWITHSUNDEEP
cssvue.jscss-selectorsnuxt.js
mariappan .gameo
mariappan .gameo

Reputation: 341

Why does the scoped styles are not being loaded in nuxt page?

I have two freshsales form as separate components in a nuxt site(say formA and formB).I have written styles overriding the default form styles which is scoped to those form components.But when I use them in a page the scoped styles are not being loaded and applied.

If I try the same without scoping,I am getting styles being applied.But formA styles is being applied for any page using formB component also.(which is expected as nuxt/vue app is concerned).

Why my scoped styles are not working?

I'll leave the sample code below.

//contactForm.vue //xxx refers to the unique 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>

I'm trying to use these components in two different pages.But the problem is if I made the style as scoped,no scopes styles are being applied.If I removed scoped,I'm getting the contact form styles on both pages applied.

Any proper way to do this.I want the styles to be separately applied for each form(like I'm selecting the field like this using css selector .fserv-field:nth-child(4)).

Or is there a better way to select the form fields without conflict.The field order would be like 3,4 (in contactForm) whereas 3,5. (in register form)

Thank you!

Upvotes: 3

Views: 2757

Answers (1)

Komninos
Komninos

Reputation: 424

You should use the >>> operator Vue offers. It will allow you to style any child components while using scoped and not creating any conflicts. Documentation link.

So your code becomes

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

and

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

Upvotes: 3

Related Questions