vue样式加scoped后不能覆盖组件的原有样式解决方法

为了vue页面样式模块化，不对全局造成污染，建议每个页面的style标签加上scoped，表示他的样式只属于当前的页面，父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担，如无法覆盖原有组件的样式。 可以加 /deep/  。

深度作用选择器 /deep/  或者  >>>

如果希望scoped样式中的选择器“深入”，即影响子组件

例子:

/deep/.swiper-pagination-bullet {
            width: 0.8rem;
            height: 0.8rem;
            background: #343434;
            border: 1px solid white;
            cursor: pointer;
            margin-left: 0.3rem;
            border-radius: 0;
            opacity: 0.2;
            box-sizing: border-box;
            &:hover {
                border: 1px solid white;
                opacity: 1;
            }
            &:last-child {
                margin-right: 1.2rem;
            }
        }

or

.a >>> .b { /* ... */ }

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_7264