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?

回答1:

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

回答2:

You need to theme antd. Doing the proposed solution by Yichaoz will just work for element that holds that class. Which will be harder to maintain, will require extra work, as you need to add that class to every element. You need to read this https://ant.design/docs/react/customize-theme for a proper solution.

来源：https://stackoverflow.com/questions/48149270/how-to-remove-the-default-padding-in-antd