Search code examples
cssantd

How to remove the default padding in antd

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?

Solution

  • 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