如何删除ANTD抽屉中的边距

Question

我使用antd抽屉。 抽屉的左右边距无法移除，因此步骤组件被左右推了几个边距（红色圆圈）。

然后，antd 步骤蓝色滑块也有一个边距（绿色圆圈）。

我尝试放置 margin:0px 和 padding:0px 但似乎无法解决这些问题。

代码沙箱： https:// codesandbox.io/s/basic-antd-4-19-5-forked-iq13nx?file=/index.js

Answer 1

您还可以使用 Drawer 属性“bodyStyle”来修改正文的样式：

        <Drawer          
          bodyStyle={{ padding:'0px' }}
        >
//...
        </Drawer>

Answer 2

如果要删除红色边距，则需要左右设置填充到0，并在垂直方面保持24px：

.ant-drawer-body {
    flex-grow: 1;
    padding: 24px 0; // <-- This 0 do the work
    overflow: auto;
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
}

对于蓝色下划线（图像中的绿色信号），必须更改此样式：

.ant-menu-horizontal > .ant-menu-item::after, .ant-menu-horizontal > .ant-menu-submenu::after {
    position: absolute;
    right: 0; // <-- 0 instead 20px
    bottom: 0;
    left: 0; // <-- 0 instead 20px
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    content: '';
}

Answer 3

BodyStyle现在已弃用
使用代码> ：

<Drawer
   styles={{
      body: {
         padding: 0
      }
    }}
/>