在使用Ant Design的模态框的时候,添加类名后,对其样式一顿操作,一保存在页面一看,煮熟的样式飞了
那这是什么原因呢? 其实就是包裹关系误导了我们。
假设页面中的代码如下:
. . . . . . . .
在代码中,模态框被我们的组件包含了,所以我们很自然的以为模态框在组件中,就很有可能写出如下代码:
.rootPage {
.....
.myModal {
......
.ant-modal-content {
.....
}
}
}
然后跑到页面一看,啥样式都没生效啊,然后就开始怀疑人生 . . . . . .
怀疑类名没加上 . . . . .
怀疑自己里面的样式或者类名没写对,怀疑样式写错了 . . . . . .
结果都没错啊!那是什么原因呢?
其实是包裹的问题,原因就是模态框他被渲染在外部了,并没有渲染在包裹模态框的组件里,所以渲染不出我们想要的效果。
而我们只需要将模态框的样式放在和组件平级的层级就可以了
此时的css 样式就可以写成:
.rootPage{
......
}
.myModal{
......
.ant-modal-content{
.....
}
}
这样就可以解决样式不生效的问题啦