CODEWITHSUNDEEP
cssantd
jayanes
jayanes

Reputation: 634

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?

Upvotes: 3

Views: 19190

Answers (3)

Razvan Rauta
Razvan Rauta

Reputation: 11

Using CSS modules:

.collapsePanel {
    :global(.ant-collapse-content-box) {
        padding: 0 !important;
    }
}

import the file and use like:

 <Collapse className={css["collapsePanel"]}>
    ...

For me worked only like this with [email protected]

Upvotes: 1

Ricardo Buquet
Ricardo Buquet

Reputation: 53

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.

Upvotes: 0

Yichz
Yichz

Reputation: 9681

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

Upvotes: 10

Related Questions