Css doesn't apply

Question

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

Ashik Paul · Accepted Answer · 2018-08-31 05:05:00Z

3

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>

edited Aug 31, 2018 at 5:05

answered Jul 2, 2018 at 12:38

Ashik Paul

2931 gold badge2 silver badges12 bronze badges

Add a comment |

AlexZh · Accepted Answer · 2018-07-02 10:49:37Z

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%; }

answered Jul 2, 2018 at 10:49

AlexZh

6374 silver badges9 bronze badges

Add a comment |

Stack Exchange Network

Css doesn't apply

2 Answers 2

Your Answer

Hot Network Questions

Css doesn't apply

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions