Ant Design Modal模态框添加类名后样式不生效

在使用Ant Design的模态框的时候,添加类名后,对其样式一顿操作,一保存在页面一看,煮熟的样式飞了

那这是什么原因呢? 其实就是包裹关系误导了我们。

假设页面中的代码如下:


. . . . . . . .

在代码中,模态框被我们的组件包含了,所以我们很自然的以为模态框在组件中,就很有可能写出如下代码:


.rootPage {
	.....
	.myModal {
		......
		.ant-modal-content {
			.....
		}
	}
}

然后跑到页面一看,啥样式都没生效啊,然后就开始怀疑人生 . . . . . .

怀疑类名没加上 . . . . .

怀疑自己里面的样式或者类名没写对,怀疑样式写错了 . . . . . .

结果都没错啊!那是什么原因呢?

其实是包裹的问题,原因就是模态框他被渲染在外部了,并没有渲染在包裹模态框的组件里,所以渲染不出我们想要的效果。

而我们只需要将模态框的样式放在和组件平级的层级就可以了

此时的css 样式就可以写成:


.rootPage{
	......
}
.myModal{
	......
	.ant-modal-content{
		.....
	}
}

这样就可以解决样式不生效的问题啦

你可能感兴趣的:(css,前端,html)