前言
日常积累,欢迎指正
场景描述
常见的 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