【React-admin】构建React应用（8）-antd默认样式的修改，不影响其他组件

在使用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={
    />
 } 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;
  }
}

这样就相当于给组件加上了一个名字空间，并与其他的相同组件隔离，不会导致出现覆盖其他组件的问题。


这样既可以修改你需要的组件样式，又不影响其他的组件。