首页 > 其他分享 >修改el-popover样式不生效问题,vue中element-ui样式修改不生效问题

修改el-popover样式不生效问题,vue中element-ui样式修改不生效问题

时间:2024-07-24 19:39:35浏览次数:15  
标签:el vue 样式 修改 scoped 生效 popover

修改el-popover样式不生效问题
在最近公司写的项目中,使用到了el-popover,但是想要修改弹出层中文本的字体样式,尝试过很多方法之后,发现修改的样式都没有生效,查阅资料发现:el-popover比较特殊,他生成的div不在当前组件之内,甚至不在App.vue组件的div内,他和App.vue组件的div平级,需要设置全局style,查阅ElementUI官方文档后发现,官方文档中提供了一个特殊的类名popper-class,所以按照官方文档去给el-popover添加一个类名:

<el-popover
    placement="right"
    width="400"
    trigger="hover"
    popper-class="popoverStyle"
    >

然后根据该类名去设置样式:

<style lang="scss" scoped>
	.popoverStyle{
		padding:20px;
		font-size:12px;
		color:#333;
	}
</style>

结果发现样式并没有生效,再次查阅文档,发现可能是由于scoped导致的,所以将scoped删除掉:

<style lang="scss">
	.popoverStyle{
		padding:20px;
		font-size:12px;
		color:#333;
	}
</style>

发现设置的样式还是没有生效,最终查阅资料发现,必须要写成以下形式才会生效(注意两个类名之间不要加空格),为了避免scoped的影响,删除掉scoped

<style lang="scss">
	.el-popover.popoverStyle{
		padding:20px;
		font-size:12px;
		color:#333;
	}
</style>

标签:el,vue,样式,修改,scoped,生效,popover
From: https://www.cnblogs.com/pansidong/p/18321565

相关文章

  • mstar 方案遥控器和按键修改方法
    mstar方案遥控器和按键修改方法:一、kernel中遥控器码值修改路径:\vendor\mstar\kernel\linaro\mstar2\drv\ir_mirc\keymaps\keymap-mstar-tv.c二、kernel中修改遥控器头码路径:vendor\mstar\kernel\linaro\mstar2\drv\ir_mirc\ir_common.h三、3.1)遥控器IR码值:kernel中......
  • PHP现代化构建工具: 无需修改任何代码和扩展将你的ThinkPHP项目性能提高20倍
    我要分享一个令人激动的黑科技:PRipple使用这个项目能够在无需修改任何代码且无需第三方扩展的前提下,将你的Laravel项目性能提高20倍。他仅仅依赖于PHP原生的pcntl/posix/fiber/sockets项目灵感这个项目灵感来源于PHP8.1引入的fiber特性,以及Swoole和Workerman的......
  • 数据库之数据的插入、修改和删除操作
    目录一、插入数据1.向表中所有字段插入数据2.向表中指定字段插入数据3.同时插入多条数据4.将其他表中的数据插入到表中二、修改数据1.修改所有数据2.修改指定数据三、删除数据1.删除所有数据2.删除指定数据一、插入数据1.向表中所有字段插入数据1)指定字段及其......
  • php判断文件真实后缀(防止修改后缀)
    <?php//判断文件真实类型functionget_file_type($fileName){$file=fopen($fileName,"rb");$bin=fread($file,2);//只读2字节fclose($file);$strInfo=@unpack("C2chars",$bin);//将字节转换为字节二进制的数组$typeCode=(int)($str......
  • 在.NET MVC 中使用 Quartz.NET 创建可以修改时间的定时任务,并结合 Autofac 进行依赖注
    net4.6.1  nuget包Quartz  3.0Autofac  5.0Autofac.Mvc5 5.0  步骤1:创建Quartz任务首先,创建一个实现 IJob 接口的任务类。这个类将定义你希望定时执行的操作。publicclassMyJob:IJob{publicTaskExecute(IJobExecutionContextcontext)......
  • 使用ControllerAdvice定义了全局异常处理器但返回不生效
    @Slf4j@ControllerAdvicepublicclassGlobalExceptionHandler{ @ExceptionHandler(Exception.class) publicAjaxResultexception(Exceptionexception){ log.error("exception:{}",exception.getMessage()); returnAjaxResult.error(exception.getMe......
  • wpf样式学习
    学习大佬视频地址:https://www.bilibili.com/video/BV1nY411a7T8/?p=58&spm_id_from=333.788.top_right_bar_window_history.content.click&vd_source=a4e06be300e655612460fd5149552558wpf样式加载窗体加载<Window.Resources><StyleTargetType="Button"......
  • 如何在不修改DBAPI游标的情况下捕获SQLAlchemy中的所有SQL查询结果?
    我正在尝试实现一个系统,该系统捕获SQLAlchemy中的所有查询结果以用于日志记录和分析目的。然而,在尝试直接修改DBAPI游标时,我遇到了挑战,因为它的属性通常是只读的。因此需要:捕获SELECTSQL查询的所有结果,并使用不同的结果获取方法(fetchone、fetchmany、fetchall、ite......
  • 织梦dedecms自定义表单选项必填怎么修改?
    我们先在plus/diy.php文件中的的第40行下加上一下代码//增加必填字段判断if($required!=&#39;&#39;){if(preg_match(&#39;/,/&#39;,$required)){$requireds=explode(&#39;,&#39;,$required);foreach($requiredsas$field){if($$field==&#39;&#39;){......
  • 【YashanDB知识库】yac修改参数后关闭数据库hang住
    【标题】yac修改参数后关闭数据库hang住【问题分类】性能优化【关键词】YashanDB,yac,shutdownhang【问题描述】修改yac参数后执行shutdownimmediate,数据库hang住。【问题原因分析】Shutdown操作时,线程在获取gInstance->trigger->sema信号量时卡住。该信号量应由mai......