前言

日常积累，欢迎指正

场景描述

常见的 Drawer 组件高度都是占满整个页面的，但某些需求下我们想要一个高度只是页面一部分的 Drawer 怎么办？直接修改 antd css ？这种方法会全局修改 Drawer 的 css 以至于影响到其他地方的 Drawer 组件展示。我们想要的这种功能 Drawer 已经提供了，我们可以借助 getContainer 属性实现，官网文档是这样描述的 getContainer 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom Drawer 挂载到一个已知dom 上后结合 less或 scss 可以实现任意修改局部 Drawer 组件的样式。

示例代码 - 挂在到当前 dom

实现原理：Drawer 的 getContainer 属性 + less/scss

js

import React from 'react' import './index.less' class Testextends React.Component { constructor(props) { super(props) this.state = { visible: true, } } /** * @desc 关闭 Drawer */ closeDrawer =()=>{ this.setState({ visible: false }) } /** * @desc 展开 Drawer */ openDrawer =()=>{ this.setState({ visible: true }) } render() { const {visible} = this.state const headerStyle ={ padding: '0px' } const bodyStyle={ padding: '8px', } return ( <div className='container' > <Drawer title="title" headerStyle={headerStyle} bodyStyle={bodyStyle} width={200} visible={visible} getContainer={false} // 重点 > Drawer content </Drawer> </div> ); } } Test.defaultProps = {} Test.propTypes = {} export default Test

less|scss

.container{ .ant-drawer{ margin-top: 65px; } }