在使用antd的时候，由于需求的时常变更或者默认样式不满足产品需求。需要我们前端人员在使用antd组件的时候需要去修改其默认组件属性。
antd的大部分组件都可以通过global来去重新设置样式(注意这里使用的是less)，我们常用的方式就是这样：
<div styleName="root"></div>
.root {height: 100%;:global {.role-table {cursor: pointer;}}}
这样就可以通过global去修改自定义样式root下使用的antd组件的样式，又同时不会影响其他地方使用的相同组件。
但是antd中有一些组件是完全脱离文档流的，也就是使用了绝对定位的元素，导致该组件渲染后的元素脱离文档流，导致变成了全局的样式。比如：Tooltip、Popconfirm、Popover这三个组件就是完全脱离了文档流，导致我们在修改一处的时候，导致起天气啊使用到这三个组件的时候，也会受到影响。
可以看到，我在logo图片上加了一个气泡pop，当点击的时候，可以查看控制台的输出结果，显示脱离文档流的元素并不在root内。我需要在pop中添加一个menu，而出现图中的这种情况，是因为pop默认有个双边距，双边距的大小存在导致了我的menu菜单没法完全去填充pop，出现图中的那个情况。
图中的这个padding: 12px 16px导致了出现了边距的情况。如果想去掉边距那么就需要重写pop的样式，而我们之前说的pop会脱离文档流导致我们只能在全局去修改样式才能生效
:global {.ant-popover-inner-content {padding: 0px;border:none;}.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow{background-color: #6c5b6f;border: 1px solid #6c5b6f;}}
当我这么设置的时候，确实能生效，内边距没了，menu菜单也可以完全填充pop.
但同时会产生另外一个问题，由于是全局修改，导致在其他地方使用到pop时就会出现问题。如下图所示，由于内边距设置为0，导致在删除时同时出现的pop样式也发生变化了，奇丑无比。
那问题既然出现了，怎么去修改某一个组件的样式而不影响其他的相同的组件呢？
有问题，我们就来到官方提供的文档，找到了overlayClassName属性，该属性表明了卡片类名。
我觉得这里解释为namesapce更为准确，表明了该组件的使用范围，即只修改该namespace下的pop样式。而这种定义方式仅仅是为了解决脱离文档流的元素即不在root元素之内。而在root内的组件可以直接在root中定义:global去修改组件样式。
在使用气泡类组件(包括Tooltip，Popconfirm，popover)，定义overlayClassName
<Popover placement="rightTop" content={<Side />} trigger="click" color="red" overlayClassName="popclass"><img src={logo} alt="logo" styleName="logo" /></Popover>
在该页面对应的css文件或者less文件中如下写法
:global {.popclass .ant-popover-inner-content {padding: 0px;border:none;}.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow{background-color: #6c5b6f;border: 1px solid #6c5b6f;}}
这样就相当于给组件加上了一个名字空间，并与其他的相同组件隔离，不会导致出现覆盖其他组件的问题。
这样既可以修改你需要的组件样式，又不影响其他的组件。
