CSS 스타일이 Flickity에 성공적으로 적용되지 않았습니다.
P粉412533525
2023-08-26 20:25:09
<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
질문을 올바르게 이해했다면 상위 구성 요소에 있는 일부
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