2

I've used custom CSS in my Webpart.module.scss and I'm trying to use these classes with ${styles.myClassName}

But the Css doesn't want to apply. Could you please help me with that.

.slickCarousel{
   .imgContainer{
       position: relative;
       text-align: center;
       color: white;
   }

   .carouselImg{
     width: 100%;
   }

  .bottomLeft{
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 120%;
  }
}

public render(): void {

    let htmlString = `<div class="slickCarousel" data-slick='{
      "dots":${this.properties.dots}, 
      "autoplay":${this.properties.autoplay}, 
      "autoplaySpeed":${this.properties.autoplayspeed*1000}, 
      "infinite": ${this.properties.infinite}, 
      "slidesToShow": ${this.properties.slidestoshow},
      "slidesToScroll": ${this.properties.slidestosroll},
      "variableWidth": ${this.properties.variablewidth},
      "centerMode": ${this.properties.centermode},
      "adaptiveHeight": ${this.properties.adaptiveHeight},
      "arrows": ${this.properties.arrows},
      "speed": ${this.properties.speed*1000},
      "cssEase": "linear",
      "fade": ${this.properties.fade},
      "vertical": ${this.properties.vertical}
    }'>`;

      this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl+`/_api/web/lists/GetByTitle('Pages du site')/items?$select=Title,BannerImageUrl&$orderby=Modified desc&$top=${this.properties.numberOfPages}`, SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
        response.json().then((responseJSON: any) => {
          responseJSON.value.forEach(element => {
           htmlString = htmlString.concat(`<div class="${styles.imgContainer}"><img class="${styles.carouselImg}" src="${element.BannerImageUrl.Url}" alt""><p class="${styles.bottomLeft}">${element.Title}</p></div>`);
          });
         htmlString = htmlString.concat(`</div`);
          this.domElement.innerHTML = htmlString;
          $('.slickCarousel').slick();
        }); 
      });
  }

Thank you in advance,

Best regards

2

Your main <div> should have the main class name of the SCSS module. In your case

<div class="${styles.slickCarousel}">
  //whole webpart code resides inside this div
  <div class="${styles.imgContainer}">
  </div>
</div>
1

Use following syntax for nested classes:

.slickCarousel .imgContainer{ position: relative; text-align: center; color: white; }

.slickCarousel .carouselImg{ width: 100%; }

.slickCarousel .bottomLeft{ position: absolute; bottom: 8px; left: 16px; font-size: 120%; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.