elementUI样式修改未生效问题详解(挂载到了body标签上)
前言
在使用element-ui库的时候，有时会需要修改它自带的css样式，组件模块化化编程时一般会用到/deep/方法进行样式穿透修改，但有些情况/deep/方法也会失效，针对这些情况，下面就以修改elementUi中的DateTimePicker时间选择器组件样式来讲一下自己的心得。
一、适用范围
1、修改elementUI自带样式
2、/deep/深穿透样式修改方法失效
3、不污染全局样式
二、示例
1.目标
假设业务需要一个只带年、月、日、时的时间选择器（如下图）
2.实现思路
首先在element-ui库中进行匹配寻找，发现没有与之完全一致的模型，为了省时，可以选择一个比较接近的模型进行ui改造，这里我选择的是 el-date-picker时间选择器
首先看下它本身的样式：
代码如下：
<div>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</div>
修改自带样式方法
找到编译后element-ui给本时间选择器定义的div盒子类名（见下图）
因为不需要图中分和秒这两列，所以我们可以在本组件的单独的样式文件中标签中修改为自己需要的样式
先来个错误示范
利用 /deep/ 方法进行样式穿透修改本时间选择器样式
代码如下（示例）：
<style scoped lang="less">
/deep/.el-picker-panel {
.el-time-spinner{
.el-time-spinner__wrapper {
width: 100% !important;
}
}
}
</style>
这样做后发现我们所修改的样式并未生效，原因是因为DateTimePicker 下拉框 最终是直接挂载到body标签上，也就是说它与我们的子组件都是并列关系，所以我们在定义它的子组件中修改它的样式会失败。
接下来展示正确做法
可以在element-ui 中看到DateTimePicker的Attributes中存在一个popper-class属性，官方介绍中可以利用它可以给DateTimePicker 下拉框的设置类名
<template>
<div class="home">
<el-date-picker
v-model="value1"
format="yyyy-MM-dd H"
value-format="yyyy-MM-dd H"
type="datetime"
placeholder="选择日期时间"
popper-class='myDatePicker'>
</el-date-picker>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
value1:''
}
},
};
</script>
<style scoped lang="less">
// 此处写本组件样式
</style>
<style lang="less">
/* 注意此处没有添加scoped属性，所以全局生效，但是有类名限制，不会与其他类样式冲突 */
.myDatePicker {
.el-time-spinner__wrapper{
width: 100% !important;
}
}
</style>最后看效果
样式生效，完结撒花。
总结
1、修改element-ui库中直接挂载到body上的组件样式时，需在全局样式中进行修改，不能在受scoped作用域限制的子组件样式中修改
2、如果此组件会用到多次，且每次都需不同的样式，那么务必给它设置一个独立的类名
到此这篇关于elementUI样式修改未生效问题的文章就介绍到这了,更多相关elementUI样式修改未生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue生命周期,结合实例形式分析了vue.js生命周期相关原理、步骤、函数与操作注意事项,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue3项目中封装axios的示例代码,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
本文讲述如何实现拥有酷炫背景视频的登录页面，浏览器窗口随意拉伸，背景视频及前景登录组件均能完美适配，背景视频可始终铺满窗口，前景组件始终居中，视频的内容始终得到最大限度的保留，可以得到最好的视觉效果2018-01-01
本篇文章主要介绍了Vue学习笔记之表单输入绑定，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
项目每次打包后都需要改动项目版本号，这个改动每次都需要在package.json中修改version，比较麻烦，到底有没有一种打包后版本号自加的办法，这篇文章主要介绍了vue打包项目版本号自加的步骤,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了Vue2.x响应式及简单的示例，应用了简单的源代码进行讲解，感兴趣的小伙伴可以参考一下，希望可以帮助到你2021-08-08
在Vue.js的应用开发中,我们经常会遇到需要动态修改DOM元素样式的情况,Vue提供了多种方式来实现这一目标,其中ref是一个非常有用且灵活的工具,本文将深入探讨如何在Vue项目中利用ref属性来更改CSS样式,并通过多个实例演示其具体用法,需要的朋友可以参考下2024-10-10
vue中使用vue-seamless-scroll插件实现列表无缝滚动效果
这篇文章主要介绍了vue中使用vue-seamless-scroll插件无缝滚动,支持上下左右无缝滚动，单步滚动停留时间，以及水平方向的手动切换，需要的朋友可以参考下2022-06-06
unplugin-vue-components解决命名冲突问题
这篇文章主要介绍了unplugin-vue-components解决命名冲突问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了使用Vue-cli3.0创建的项目，如何发布npm包,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
最新评论