如何去除antd中的默认填充 [英] How to remove the default padding in antd

问题描述

我创建了可折叠侧边栏.在侧边栏内容自动采用蚂蚁设计填充值(16px)在顶部，右侧，底部和左侧.我需要删除这个自动填充

 render() {返回 (<div className="common-coll-bar"><收起><Panel header="Present Staffs" style={customPanelStyle}><p style={{ height: 550, color: '#131D43', background: '#607B7E', padding: 0 , margin: 0 }}>{文本}
</面板></收起>

);

}

你能帮我吗?

解决方案

您必须手动覆盖样式.

您可以向面板添加自定义类:

并添加更少:

.custom {.ant-collapse-content-box {填充:0；}}

https://codepen.io/kossel/pen/gooQqv

I created collapsible sidebar.In side the sidebar that content automatically taken ant design padding value(16px)at the top,right,bottom and left .I need to remove this automatic padding

 render() {
return (
  <div className="common-coll-bar">
    <Collapse >
      <Panel header="Present Staffs" style={customPanelStyle}>
        <p style={{ height: 550, color: '#131D43', background: '#607B7E', padding: 0 , margin: 0 }}> {text}</p>
      </Panel>

    </Collapse>
  </div>
);

}

Can you help me?

解决方案

You would have to manually overwrite the styling.

You can add a custom class to panel:

 <Panel header="This is panel header 1" key="1" className="custom">

and Add less:

.custom {
  .ant-collapse-content-box {
    padding: 0;
   }
}

https://codepen.io/kossel/pen/gooQqv

这篇关于如何去除antd中的默认填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！