Vue项目中修改IView的默认样式 以修改Modal组件的默认样式为例

问题描述

在开发过程中使用IView组件库中的Modal组件，想要修改Modal的宽度，但是直接修改Modal组件自带的类名不生效。

解决办法（以修改Modal组件宽度为例）

官方文档提供了如何修改Modal自定义样式的方法：IView-Modal对话框

在Modal组件中使用class-name来给对话框容器添加类名，添加的类名加到了.ivu-modal-wrap这一容器上，可以辅助实现我们想要的自定义效果。

		   <template>
		  	   <Modal
			        class-name="modify-style"
			        title="修改IView默认样式">
			   </modal>
			   <Modal
			   		title="修改IView默认样式"
		            :styles="{width: '800px'}">
		        </Modal>
		   <template>
		   <style>
		   		.modify-style .ivu-modal {
      
      
		   			width:800px !important;
		   		}
		   	</style>

如果对你有所帮助，请记得一键三联哦