CSS样式未成功应用于Flickity
P粉412533525
P粉412533525 2023-08-26 20:25:09
[Vue.js讨论组]
<p>相当简单的问题,我认为它可能与这个问题有关,但是是在Vue中而不是Angular。 我尝试应用于我的Flickity轮播的CSS样式在我的Vue 3应用程序中无法渲染。在IDE中,样式被灰掉了,但是当我通过检查(例如更改carousel-cell的宽度)在浏览器中编辑它们时,它可以正常工作。</p> <p>我是否遗漏了某个CSS导入,以使我的CSS文件正确地改变浏览器中呈现的布局的外观?</p> <pre class="brush:html;toolbar:false;">&lt;template&gt; &lt;div class="col d-block m-auto"&gt; &lt;flickity ref="flickity" :options="flickityOptions"&gt; &lt;/flickity&gt; &lt;/div&gt; &lt;/template&gt; &lt;style scoped&gt; .carousel-cell { background-color: #248742; width: 300px; /* full width */ height: 160px; /* height of carousel */ margin-right: 10px; } /* position dots in carousel */ .flickity-page-dots { bottom: 0px; } /* white circles */ .flickity-page-dots .dot { width: 12px; height: 12px; opacity: 1; background: white; border: 2px solid white; } &lt;/style&gt; </pre>
P粉412533525
P粉412533525

全部回复(1)
P粉482108310

如果我正确理解了问题,您想要覆盖一些父组件中的Flickity.vue组件的样式。

使用Scoped CSS(即<style scoped>),样式仅应用于当前组件而不是其子组件。如果您想继续使用Scoped CSS,您可以在选择器周围使用:deep()(Vue 2中的::v-deep)来针对动态子组件进行定位,如下所示。

由于Flickity.vue组件自身对.carousel-cell的作用域样式具有更高的CSS特异性,父组件需要提高其特异性(例如,使用!important)。

<style scoped>
:deep(.carousel-cell) {
  background-color: red !important;
  width: 300px !important;
  height: 160px !important;
  margin-right: 10px !important;
}

/* position dots in carousel */
:deep(.flickity-page-dots) {
  bottom: 0px;
}
/* white circles */
:deep(.flickity-page-dots .dot) {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: blue;
  border: 2px solid white;
}
</style>

演示1

或者,您可以使用普通/非作用域的<style>块。只需删除scoped属性即可。

演示2

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号