vue样式问题

• 样式
• 说明
• 解决办法
• vu3中样式穿透

样式

1. 在vue项目中 全局样式 直接在 main.js 引入 或者在 APP.vue 中引入

// main.js
import '@/assets/css/base.css'

// App.vue
<style src="./assets/css/base.css"> </style>

2. 局部组件中样式 在该组件中生效;

<style scoped src="@/assets/css/about.css"></style>
<style lang="sass" scoped>
    ... some style

</style>

说明

scope 属性的样式
会给 dom 元素上添加一个 以 data-v 开头的属性,然后通过 属性选择符选中样式
元素

选中的样式 .setfontSize[data-v-039c5b43]{...some style}
也是说 父组件无法直接修改子组件内的样式

解决办法

1. 穿透scoped
stylus的样式穿透 使用>>>     sass和less的样式穿透 使用/deep/
    .mystyle /deep/ .childCompentsstyle

2. 使用两个style标签来修改样式
<style>
    /* 用于修改第三方库的样式 */
</style>
<style scoped>
    /* 自己的组件内样式 */
</style>

3. 添加class 
通过在外层dom上添加唯一的class来区分不同组件

vu3中样式穿透

scoped失效及vue3 scss中不使用::v-deep作为样式穿透的写法，
样式穿透就是为了scoped出现的，scoped的作用，

1.什么是scoped
在Vue文件中的style标签上有一个特殊的属性，scoped。
当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。
如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。

2、有 scoped 的情况
<style lang="scss" scoped>
// 全局样式穿透 如 弹窗等
:global(.ant-modal-header){
    padding: 10px 10px;
}
// 组件样式穿透
:deep(.ant-switch-handle::before){
  background-color: gray;
}
//插槽样式
:slotted(.ant-switch-handle){
	color:pink;
}
3、无scoped 的情况 直接找到要修改的样式 全局生效
<style lang="sacss">
    .ant-modal-header{
        padding: 10px 10px;
    }
</style>