antd Drawer 组件如何让任意被修改的样式只在局部生效

前言

日常积累，欢迎指正

场景描述

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