찾다

 >  Q&A  >  본문

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

<p>아주 간단한 질문입니다. 이 문제와 관련이 있을 수 있지만 Angular가 아닌 Vue에서 발생합니다. Flickity 캐러셀에 적용하려는 CSS 스타일이 Vue 3 앱에서 렌더링되지 않습니다. IDE에서는 스타일이 회색으로 표시되지만 브라우저에서 검사(예: 캐러셀 셀의 너비 변경)를 통해 스타일을 편집하면 제대로 작동합니다. </p> <p>내 CSS 파일이 브라우저에 렌더링된 레이아웃의 모양을 올바르게 변경할 수 있게 해주는 특정 CSS 가져오기가 누락되었나요? </p> <pre class="brush:html;toolbar:false;"><템플릿> <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 단색 흰색; } </스타일> </pre>
P粉412533525P粉412533525461일 전604

모든 응답(1)나는 대답할 것이다

  • P粉482108310

    P粉4821083102023-08-27 10:46:27

    질문을 올바르게 이해했다면 상위 구성 요소에 있는 일부 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

    회신하다
    0
  • 취소회신하다