前言


日常积累，欢迎指正


场景描述

常见的 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;
  }
}