如何去掉antd中的默认padding

Question

我在侧边栏创建了可折叠的 sidebar.In，内容自动在顶部、右侧、底部和左侧采用 ant 设计填充值 (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

您必须手动覆盖样式。

您可以将自定义 class 添加到面板：

 <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 提出的解决方案将只适用于持有 class 的元素。这将更难维护，需要额外的工作，因为您需要将 class 添加到每个元素。您需要阅读此 https://ant.design/docs/react/customize-theme 以获得正确的解决方案。

如何去掉antd中的默认padding

How to remove the default padding in antd

css

antd