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

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

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

假设页面中的代码如下：

	
		. . . . . . . . 
	 


1
2
3
4
5
6
7

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

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

1
2
3
4
5
6
7
8
9
10
11

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

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

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

结果都没错啊！那是什么原因呢？

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11

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