CSS 스타일이 Flickity에 성공적으로 적용되지 않았습니다.

Question

아주 간단한 질문입니다. 이 문제와 관련이 있을 수 있지만 Angular가 아닌 Vue에서 발생합니다. Flickity 캐러셀에 적용하려는 CSS 스타일이 Vue 3 앱에서 렌더링되지 않습니다. IDE에서는 스타일이 회색으로 표시되지만 브라우저에서 검사(예: 캐러셀 셀의 너비 변경)를 통해 스타일을 편집하면 제대로 작동합니다.

내 CSS 파일이 브라우저에 렌더링된 레이아웃의 모양을 올바르게 변경할 수 있게 해주는 특정 CSS 가져오기가 누락되었나요?

<템플릿>
    <div class="col d-block m-auto">
       <flickity ref="flickity" :options="flickityOptions">
       </플리키티>
    </div>
</템플릿>

<스타일 범위>
    .carousel-cell {
      배경색: #248742;
      너비: 300px; /* 전체 너비 */
      height: 160px; /* 캐러셀 높이 */
      오른쪽 여백: 10px;
    }
    
      /* 캐러셀에 점 위치 지정 */
    .flickity-페이지-점 {
      하단: 0px;
    }
    /* 흰색 원 */
    .flickity-페이지-점 .dot {
      너비: 12px;
      높이: 12px;
      불투명도: 1;
      배경: 흰색;
      테두리: 2px 단색 흰색;
    }
</스타일>

Answer 1

질문을 올바르게 이해했다면 상위 구성 요소에 있는 일부 Flickity.vue구성 요소의 스타일을 재정의하고 싶을 것입니다.

다음과 같이 범위가 지정된 CSS(예: <style scoped>），样式仅应用于当前组件而不是其子组件。如果您想继续使用Scoped CSS，您可以在选择器周围使用:deep()（Vue 2中的::v-deep)를 사용하여 동적 하위 구성 요소를 타겟팅합니다.

Flickity.vue组件自身对.carousel-cell的作用域样式具有更高的CSS特异性，父组件需要提高其特异性（例如，使用!important 구성 요소 자체는 .carousel-cell의 범위 지정 스타일에 대한 CSS 특이성이 높으므로 상위 구성 요소는 해당 특이성을 높여야 합니다(예: !important 사용).

으아악

데모 1

또는 일반/범위가 지정되지 않은 <style>块。只需删除scoped속성을 사용할 수도 있습니다.

데모 2