修改scoped下的element的样式不生效的问题

当使用Element UI时,遇到修改scoped内组件样式无效的问题。可以尝试通过@import引入全局CSS、创建无scoped的style标签或者利用popper-class属性来定位修改样式。这些方法在/deep/和important不生效的情况下提供了解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

修改scoped下的element的样式不生效的问题

项目中使用的是element的组件在使用tooltip/dialog组件/Cascader 级联选择器的时候,修改样式发现没有生效(动态添加组件的层级并不是在使用的地方,而是和我们的app是在同一层级的,所以直接scoped中改是不会生效的)

一、@import引入css

自定义一个公共的css配置文件,提前设置固定的css样式在使用@import引入使用
优点:这样的好处就是全局的样式不受当前组卷scoped的影响
缺点:如果在项目中多处使用,想要设置不同的样式的时候要添加不同的css类

<style  lang="scss" scoped>
@import 'src/assets/css/defines.scss';
#oaHeader {
    background: red;
}
</style>

二、样式区分写

可以在文件中添加两个style,一个添加scoped,一个不写,不写scoped的样式会作用到全局

<style lang="less" scoped>
.text {
  color: red;
}
</style>
<style lang="less">
.tooltip-width {
  max-width: 100px;
}
</style>

缺点:会影响到全局,干扰其他地方的样式
改进:在不写scoped的style中在使用一个组件最外层的类包裹一下

三、popper-class

<el-tooltip
   popper-class="tooltip-width"
   placement="top">
   <span slot="content" class="tooltip-text">asdfasdfasdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
     <span class="text">tooltip</span>
</el-tooltip>

<style lang="less" scoped>
.tooltip-text {
  max-width: 100px;
  display: inline-block;
}
</style>

//如果修改小箭头的样式
.el-tooltip__popper[x-placement^=top] .popper__arrow:after{
        border-top-color:  #595959 !important;
    }


注意:以上的方式均是在已经使用了/deep/和importent 不生效的情况下才想出的解决办法,
链接: https://blog.youkuaiyun.com/weixin_45634433/article/details/118975316.

### 解决Element Plus中`el-select`组件选项样式修改不生效问题 当尝试修改 `el-select` 组件中的下拉框样式时,如果发现无论采用何种方式(如使用穿透属性或添 `!important`),这些更改均未反映到实际页面上,则可能是因为默认情况下,`el-select` 的下拉列表并非直接附于当前元素所在的DOM树内而是被放置到了body标签之下[^2]。 为了使自定义CSS能够有效应用至目标区域,建议采取如下措施: #### 方法一:调整弹出层位置配置 可以通过设置 `popper-append-to-body=false` 来改变这一行为,让下拉菜单跟随父级容器一起移动并保持在同一层级结构之内。这样做的好处是可以更容易地控制其外观表现而不会受到全局样式的干扰。 ```html <template> <el-select v-model="value" popper-append-to-body="false"> <!-- options --> </el-select> </template> ``` #### 方法二:利用深度作用域插槽 (Scoped Slot) 对于更复杂的场景,可以考虑运用Vue提供的slot机制来实现完全定制化的内容布局。具体来说就是通过向子组件传递具名插槽的方式获取更多灵活性,从而允许开发者自由设计内部HTML片段及其关联样式表单[^1]。 ```vue <template> <el-select v-model="value"> <el-option v-for="(item, index) in items" :key="index" :label="item.label" :value="item.value" slot-scope="{ item }" > <span style="float: left">{{ item.label }}</span> <span style="float: right; color: #8492a6; font-size: 13px">{{ item.desc }}</span> </el-option> </el-select> </template> <script setup lang="ts"> import { ref } from 'vue'; const value = ref(''); const items = [ { label: "Option One", desc: "(Description)", value: "one" }, // other options... ]; </script> ``` #### CSS覆盖技巧 除了上述方法外,在某些特殊需求面前还可以借助一些额外的技术手段来进行更精细的微调工作。比如引入第三方预处理器Less/Sass编写更具针对性的选择器路径;或是配合JavaScript动态注入临时样式节点等操作达成目的。 需要注意的是,由于框架版本迭代更新较快的缘故,部分旧版兼容性处理方案可能会逐渐被淘汰,请务必参照最新官方文档说明进行实践验证。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值