Using scss plus scoped causes style failure
Solution to customizing third-party ui framework styles when adding scoped to style tags in vue3
Add /deep/ >>> or ::v-deep to the style
.ant-layout-header {
.ant-menu::v-deep .ant-menu-item-selected {
background-color: #fff;
}
}Things to note
- /deep/ is not supported in scss (an error will be reported)
- Use >>> in scss without effect (no error report, but no use)
- ::v-deep can be used in scss
Throw a warning using ::v-deep in vue3 + vite
:v-deep usage as a combinator has been deprecated. Use :deep() instead.
Solution Use :deep()
:deep(.ant-menu) {
.ant-menu-item-selected {
}
.ant-menu-item:hover {
}
&.ant-menu-dark {
}
}Depth selector
Adding styles in vue are invalid, scoped penetration you need to know about it
1. What is scoped
There is a special property on the style tag in the Vue file, scoped.
When a style tag has scoped attribute, its css style can only be used for the current Vue component, which can prevent the component's style from polluting each other.
If all style tags of a project are added with scoped attributes, it is equivalent to implementing modularity of styles.
penetrate
Scs' style penetration, add /deep/ in front of the style selector
<style lang="scss" scoped>
/deep/.el-scrollbar__wrap{
overflow-x: hidden;
}
</style>3. Another way to achieve penetration effect
<style lang="scss">
.el-scrollbar__wrap{
overflow-x: hidden;
}
</style>Just write another <style></style> tag, don't add scoped.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.