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

最新推荐文章于 2025-06-13 16:48:47 发布

SarinaDu

最新推荐文章于 2025-06-13 16:48:47 发布

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： antd 文章标签： antd

本文链接：https://blog.youkuaiyun.com/m0_37148591/article/details/109186071

antd 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在不全局影响其他组件的情况下，利用 Antd Drawer 的 getContainer 属性，结合 less 或 scss 实现对 Drawer 组件的局部样式修改，以达到创建一个仅占据页面部分高度的 Drawer 效果。

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

前言

日常积累，欢迎指正

场景描述

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