Ant Design 中覆盖组件样式

hongten_chen

于 2020-10-26 14:53:20 发布

阅读量3.4k

点赞数

分类专栏： Ant Design Pro 文章标签： css

本文链接：https://blog.csdn.net/zjq_1234/article/details/109289033

版权

Ant Design Pro 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何通过定制className和less样式来修改AntDesign中的Drawer组件的默认padding值，以适应特定的设计需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景：

比如ant design中的抽屉Drawer这个组件，由于组件库中的样式是给了padding为25px，但是我当前的需求是不需要padding，那么就需要写样式覆盖掉之前组件定义的样式。

1 需要找到该组件对应的padding这个样式所在的类。

2 在代码中给Drawer组件一个className属性，如下

<Drawer
              title="aaa" 
              placement="right"
              closable
              onClose={this.onClose}
              visible={this.state.fullVisible}
              width="100%"
              height="100%"
              className="drawerStyle" // 对该属性的样式进行设置
            >
              <iframe
                style={{ height: window.innerHeight, width: '100%' }}
                title="指标展现详情"
                src={detail.reportUrl}
              />
            </Drawer>

3 在less文件中对className="drawerStyle"的样式进行配置，并放在global中，如下：

:global {

 .drawerStyle {
    .ant-drawer-content-wrapper {
      .ant-drawer-content {
        height: calc(100% + 500px);
        .ant-drawer-wrapper-body {
          .ant-drawer-body {
            padding: 0px;
          }
        }
      }
    }
  }
}

此时，抽屉组件的padding属性即为0px;