AntDesign自定义Drawer抽屉组件内容样式不生效问题

最新推荐文章于 2025-04-25 14:00:40 发布
最新推荐文章于 2025-04-25 14:00:40 发布
阅读量4.7k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： react 前端框架 antd-Design 文章标签： reactjs javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CCQStudy/article/details/115912565
本文介绍在使用Ant Design和Less时遇到的自定义抽屉组件样式不生效的问题及解决方法。通过调整样式作用域，使抽屉内容样式正确应用。

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

1.先看一下效果： 抽屉里自定义内容样式正常生效效果
在这里插入图片描述
2.场景阐述： 使用antd + less书写自定义抽屉组件中的内容，如下图代码所示。less样式文件中的样式使用包含结构，结果发现样式不生效。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.问题排查： 当我开始用浏览器开发工具定位页面内容元素时，发现抽屉内容是一个独立的DOM，因此我们只需要将抽屉里自定义内容的样式定义部分放在和页面父容器平级即可。
在这里插入图片描述
在这里插入图片描述
4.问题解决
在这里插入图片描述

vue3 - ant design vue 抽屉弹框组件 a-drawer 拖曳侧边修改宽度功能，让Drawer抽屉框可以拖拽边缘动态修改宽度效果，vue3+antd3如何让抽屉组件变成可拖动百分比宽
高级前端工程师
07-25 3080
vue3，ant design vue，antd，抽屉弹框，a-drawer，抽屉组件Drawer，可拖动的抽屉，拖曳，拖拽，按住侧边进行左右拖动改变宽度，鼠标按下拖曳拖拽拖动，动态改变宽度，vue3+antd3如何将drawer抽屉弹框修改成可以左右拖动动态修改宽度，抽屉弹框可拖曳动态调整宽度，可调整大小的抽屉组件，可拖拉宽度抽屉，添加可拖动侧边栏宽度的功能，拖曳改变宽度，抽屉Drawer组件实现鼠标拖拽控制宽度，antd实现宽度拖拽，实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围，鼠标拖拽的
对 Ant-design 的 Drawer 组件 增加拖拽效果
chenyajundd的博客
07-23 1861
实现这个需求首先确定按下元素的位置，为按下元素添加相应事件，根据移动的距离动态赋值内容容器的宽度，再根据Drawer的width：auto，自动撑开Drawer组件即可。当然实现过程中也有其他小 bug，比如选中文字，设置最小宽度等等，其实还有小问题，文章中并没有呈现，就是如果里面的内容时 iframe 引入的话，会导致移动事件失效，这个会单独写一篇文章，主要方便有相同问题的朋友进行搜索解决问题。
Antd Modal Drawer 更改默认项
最新发布
paopao_pop的博客
04-25 259
当项目比较大使用了非常多的 Modal 和 Drawer 要是有需求一次性全部调整就会比较麻烦，目前 Antd 的 ConfigProvider 暂不支持（也有可能我没找到，待大佬指证）就比如由于默认 Modal Drawer 的遮罩层是可以点击关闭的，但是业务需要，要求全部不可点击，这时候一个一个去加就很麻烦，还容易遗漏。新建 patch 的文件夹（名字随意）为了方便扩展，结构根据自己需要调整。在 main.tsx 引入。
antd抽屉Drawer在已经设置了全局宽度样式后，单独某个页面设置宽度width样式不生效
u010234868的专栏
05-16 560
antd 抽屉Drawer默认是挂载到body节点的，此时自定义样式时，需要将样式放在页面内容的根节点之外，body之内，不能将抽屉Drawer的自定义样式放在页面内容节点之内。项目中antd抽屉Drawer在已经设置了全局宽度样式后，单独某个页面设置宽度width样式不生效，加上!important也不生效，样式文件用的是less。另外也可以使用getContainer指定Drawer挂载的节点，为符合 React 18 concurrent 标准，从。需要始终返回唯一 dom 节点。
vue2使用ant design 的drawer组件显示不了抽屉内容与collapse组件需要点击两次才展开的问题
weixin_46687032的博客
05-18 4002
由于ant官方文档用的是ts和vue3写的，所以用vue2可能会有问题实现不了(也有可能是官方文档的问题，这文档真的很难看懂，需要去搜索其他文章才能够实现，这里记录下我的踩坑记录) Drawer 抽屉组件 Ant 官方文档-Drawer组件 原先我是用了第一个例子（基本用法，如下图） 但是，显示不了抽屉内容，按f12发现drawer的内容并不在dom中，最后参考了这篇文章成功显示出来了。主要就是v-model:visible改成:visible；@after-visible-change也没反应，改成.
antd design 引用样式不生效问题
老八的专栏
04-16 3683
react中使用ant design组件
antd中默认的样式修改不了咋办呢，捉急呀
宫崎骏爷爷的捣蛋野孩子
04-12 5198
使用antd，想要修改默认的样式，一直无法生效？？ 1、添加类名或者样式style 直接在相应组件上添加想要的样式相应的属性style，但是这种方式经常不会生效。 2、使用：global{}属性覆盖默认的属性 （1）前提：学会如何正确的找到组件的样式选择器 （可以使用Chrome控制台） 比如我这里想要将上传按钮的边框改成圆角（border-radius），选中button元素，然后在右边的样式表中先测试一下能不能生效，这里是生效了，那么说明改这个类选择器的样式是可以的。这个时候可以直接在相应组件中添加相应
antd-select组件样式，option下拉选中勾选样式，下拉箭头位置，使用Drawer样式失效
jyl919221lc的博客
03-07 1430
当你设置了 getContainer={false}，Drawer 将直接渲染在其父组件内，而不是作为 body 的直接子元素。getContainer 属性决定了 Drawer 渲染的 HTML 节点位置，默认情况下，Drawer 会被渲染到 body 元素上。这样做的好处是避免了 Drawer 内容的样式受到外部容器样式的影响。的问题，尤其是当 Drawer 包含诸如下拉菜单这样需要==“溢出”==（overflow）的子组件时。组件时，在less写法中修改下拉样式。注意：如果在使用抽屉。
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
【React】Ant Design 5.x版本drawer抽屉黑边问题
无限循环
09-24 733
Ant Design 的抽屉组建关闭蒙蔽时显示黑边的解决方案
【图文并茂】ant design pro 如何用 Drawer 和 ProDescriptions 实现一个抽屉式详情页
求知久久编程学院
08-23 677
我们要实现一个很好的详情页。在 index.tsx 里。在哪里点击进入详情页。
Ant-Design组件源码分析——Drawer
qq_46025739的博客
10-13 1712
2021SC@SDUSC 源码分析如下 首先导入了相关使用的模块 import * as React from 'react'; import RcDrawer from 'rc-drawer'; import CloseOutlined from '@ant-design/icons/CloseOutlined'; import classNames from 'classnames'; import { ConfigContext, DirectionType } from '../config
ant-design-vue中对a-model使用穿透属性仍然改不了样式的解决办法
Yukinoshita_kino的博客
11-15 1万+
ant-design-vue中对a-model使用穿透属性仍然改不了样式的解决办法
ant design 里的drawer ＋响应式
m0_71131345的博客
11-11 310
Drawer placement="right" onClose={onClose} open={visible} title="提交表单数据">
antd mobile 的 Drawer点击失效以及无法弹出
Akukudeteng的博客
05-10 2254
主要有几个方面的注意点！ 1. Drawer的必备样式要写上（经常性原因） 官网有这样一段样式，要加上，不然会造成抽屉无法弹出 在less样式文件中，添加这段样式 import styles from './index.less'; ..... <Drawer className={styles.mydrawer} ..... > less: /*-----抽屉必备样式-----*/ .my
element ui dialog custom-class不生效
热门推荐
weixin_42208184的博客
05-08 2万+
自己记录一下：最近使用el-dialog中的custom-class，修改发现样式不生效 图中可以看出页面已经渲染出设置的custom-class类，但是实际上样式并没有生效 左图为页面渲染，右图为自定义类名 解决办法：在设置的类名前加上.el-dialog，这样自定义 的类样式就生效了 ...
解决 react ECharts 使用antd 抽屉的时候宽度无法实现100%
u014409941的博客
06-30 1184
解决 react ECharts 使用antd 抽屉的时候宽度无法实现100%
ant design vue 中drawer组件没办法自适应窗口变化
qq_44361111的博客
12-10 2182
给组件设置高度，虽然是获取窗口高度，但由于只在页面加载的时候获取，所以缩放窗口时无法实现drawer组件高度自适应 一开始使用addEventListener() 方法监听窗口变化，重新赋值的方法，但是效果并不理想。于是换了一种监听方法。 首先在需要监听的对象上添加ref 然后引入用到的包（先安装再引入） import elementResizeDetectorMaker from 'element-resize-detector' 最后监听到对象大小变化时，重新给drawer的高...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值