Question

我创建了可折叠的侧边栏。在侧边栏中，内容自动采取了设计填充值（16px）的顶部，右侧，底部和左侧。我需要删除此自动填充

 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>
);

}

你能帮助我吗？

Answer 1

您必须手动覆盖样式。

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

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

并添加更少：

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

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

Answer 2

您需要主题antd。由Yichaoz提出建议的解决方案仅适用于持有该类的元素。由于您需要将该类添加到每个元素，因此将更难以维护，这将需要额外的工作。您需要阅读此https://ant.design/docs/react/customize-theme以获得适当的解决方案。

如何删除antd中的默认填充

2 个答案: