Class needs to be removed in <Popover/>

✅ I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

N/A

Steps to reproduce

Simply render a normal popover component.

What is expected?

I expect to be able to completely customize the entirety of the popover inner content.

What is actually happening?

There is padding that is inserted via a child class of ant-popover-inner (which is provided by overlayInnerStyle prop) called ant-popover-inner-content. This class ant-popover-inner applies redundant padding and styling that does not need to exist.

Environment	Info
antd	4.16.13
React	React 17
System	Latest MacOSX
Browser	Latest Chrome

---

There are multiple comments in issues that mention this and are completely valid. We need to be able to remove padding, or it doesn’t need to be there at all. There is 0 use for it. The styling cannot be locally overridden since the class is sub-rendered by the popover component.

See this comment, which has some support: https://github.com/ant-design/ant-design/issues/11364#issuecomment-722771445

Below is what the DOM looks like. See comments below.

<div class="ant-popover ant-popover-placement-bottom ">
  <div class="ant-popover-content">
    <div class="ant-popover-arrow">
      <span class="ant-popover-arrow-content"></span>
    </div>
    <div class="ant-popover-inner" role="tooltip" style="margin: 0px; padding: 0px; border: none;"> <!-- overlayInnerStyle -->
    <div class="ant-popover-inner-content"> 
    <!-- This class is adding unnecessary styling and prevents us from overriding locally. It needs to be removed.
      .ant-popover-inner-content {
            padding: 12px 16px;
            color: rgba(0, 0, 0, 0.85);
        } 
    -->
      <!-- Inner Content Goes Here-->
    </div>
  </div>
</div>

[afc163]

You can use overlayInnerStyle to remove default padding.

[spencer741]

@afc163 Referencing the code block of the issue, OverlayInnerStyle applies To ant-popover-inner, not to ant-popover-inner-content.

OverlayInnerStyle needs to apply to ant-popover-inner-content, which is the direct wrapper of the inner popover. It does not need to apply to ant-popover-inner (the parent of ant-popover-inner-content).

<div class="ant-popover-inner" role="tooltip" style="margin: 0px; padding: 0px; border: none;"> <div class="ant-popover-inner-content">