element之改变el-dialog的宽度的坑(本地样式在线上不生效)
做项目的时候用到element的el-dialog的组件,需求是把弹窗的宽度设置小,用了很多方法,在本地运行都可以实现,但是到了线上,设置的样式就直接被默认样式覆盖掉了,下面就来说说我踩过的坑。
方法1
通过查找 el-dialog的官网api,查到其有宽度width的属性,设置其宽度比例即可
width=“85%”,但经设置后,在本地项目可以生效,但是线上发现没起任何作用。
方法1失败。
方法2
el-dialog增加了一个customClass
使用这个方法同样是在本地可以,但是在本地不行
方法失败
方法3
给新加的类的width加上!important
使用这个方法在浏览器调试发现,设置的宽度直接被el-dialogd默认的样式min-width:50%,覆盖,方法失败
解决方案
给新加的类的width加上!important,然后设置min-width属性设置为自己想要的最小宽度,同样加上!important
如下图
这样不管是线上还是线下改变el-dialog的宽度都可以生效了
总结
el-dialog有默认的min-width:50%;他的权重比较高,所以项目发到线上本地设置的样式会被覆盖掉,所以需要给新加的costomWidth类加上width: 30% !important;
min-width: 100px !important;切记一定要加min-width: 100px !important;不然设置的width还是不生效。