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

最新推荐文章于 2024-08-27 19:12:22 发布
原创 最新推荐文章于 2024-08-27 19:12:22 发布 · 4.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#reactjs #javascript #css3

本文介绍在使用Ant Design和Less时遇到的自定义抽屉组件样式不生效的问题及解决方法。通过调整样式作用域，使抽屉内容样式正确应用。

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

vue3 - ant design vue 抽屉弹框组件 a-drawer 拖曳侧边修改宽度功能，让Drawer抽屉框可以拖拽边缘动态修改宽度效果，vue3+antd3如何让抽屉组件变成可拖动百分比宽
高级前端工程师
07-25 3399
vue3，ant design vue，antd，抽屉弹框，a-drawer，抽屉组件Drawer，可拖动的抽屉，拖曳，拖拽，按住侧边进行左右拖动改变宽度，鼠标按下拖曳拖拽拖动，动态改变宽度，vue3+antd3如何将drawer抽屉弹框修改成可以左右拖动动态修改宽度，抽屉弹框可拖曳动态调整宽度，可调整大小的抽屉组件，可拖拉宽度抽屉，添加可拖动侧边栏宽度的功能，拖曳改变宽度，抽屉Drawer组件实现鼠标拖拽控制宽度，antd实现宽度拖拽，实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围，鼠标拖拽的
【图文并茂】ant design pro 如何用 Drawer 和 ProDescriptions 实现一个抽屉式详情页
求知久久编程学院
08-23 1046
我们要实现一个很好的详情页。在 index.tsx 里。在哪里点击进入详情页。
antd抽屉Drawer在已经设置了全局宽度样式后，单独某个页面设置宽度width样式不生效
u010234868的专栏
05-16 669
antd 抽屉Drawer默认是挂载到body节点的，此时自定义样式时，需要将样式放在页面内容的根节点之外，body之内，不能将抽屉Drawer的自定义样式放在页面内容节点之内。项目中antd抽屉Drawer在已经设置了全局宽度样式后，单独某个页面设置宽度width样式不生效，加上!important也不生效，样式文件用的是less。另外也可以使用getContainer指定Drawer挂载的节点，为符合 React 18 concurrent 标准，从。需要始终返回唯一 dom 节点。
ant-design在 vue 抽屉（drawer）里面嵌套弹出框（modal）出现蒙层遮挡弹框问题
MingT 明天你好！的博客
07-26 1万+
ant-design在 vue 抽屉（drawer）里面嵌套弹出框（dialog）出现蒙层遮挡弹框问题
vue2使用ant design 的drawer组件显示不了抽屉内容与collapse组件需要点击两次才展开的问题
weixin_46687032的博客
05-18 4193
由于ant官方文档用的是ts和vue3写的，所以用vue2可能会有问题实现不了(也有可能是官方文档的问题，这文档真的很难看懂，需要去搜索其他文章才能够实现，这里记录下我的踩坑记录) Drawer 抽屉组件 Ant 官方文档-Drawer组件 原先我是用了第一个例子（基本用法，如下图） 但是，显示不了抽屉内容，按f12发现drawer的内容并不在dom中，最后参考了这篇文章成功显示出来了。主要就是v-model:visible改成:visible；@after-visible-change也没反应，改成.
antd design 引用样式不生效问题
老八的专栏
04-16 3743
react中使用ant design组件
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
VUE组件中的 Drawer 抽屉实现代码
10-16
通过使用Vue.js框架，开发者可以通过自定义组件的方式实现Drawer抽屉效果。在实现过程中，通常需要考虑组件的样式、行为以及如何响应外部事件。 本篇文章所提供的Drawer抽屉实现代码，主要使用了Vue的模板语法、...
Ant Design Vue Drawer 抽屉如何加层级
最新发布
06-26
在Ant Design Vue中，为Drawer抽屉组件设置`z-index`层级可以通过以下几种方式实现： ### 1. 使用内联样式或类名控制 可以在抽屉组件的外层包裹一个`<div>`，并通过内联样式或自定义类名设置`z-index`值。例如： ``...
antd中默认的样式修改不了咋办呢，捉急呀
宫崎骏爷爷的捣蛋野孩子
04-12 5377
使用antd，想要修改默认的样式，一直无法生效？？ 1、添加类名或者样式style 直接在相应组件上添加想要的样式相应的属性style，但是这种方式经常不会生效。 2、使用：global{}属性覆盖默认的属性 （1）前提：学会如何正确的找到组件的样式选择器 （可以使用Chrome控制台） 比如我这里想要将上传按钮的边框改成圆角（border-radius），选中button元素，然后在右边的样式表中先测试一下能不能生效，这里是生效了，那么说明改这个类选择器的样式是可以的。这个时候可以直接在相应组件中添加相应
antd-select组件样式，option下拉选中勾选样式，下拉箭头位置，使用Drawer样式失效
jyl919221lc的博客
03-07 1757
当你设置了 getContainer={false}，Drawer 将直接渲染在其父组件内，而不是作为 body 的直接子元素。getContainer 属性决定了 Drawer 渲染的 HTML 节点位置，默认情况下，Drawer 会被渲染到 body 元素上。这样做的好处是避免了 Drawer 内容的样式受到外部容器样式的影响。的问题，尤其是当 Drawer 包含诸如下拉菜单这样需要==“溢出”==（overflow）的子组件时。组件时，在less写法中修改下拉样式。注意：如果在使用抽屉。
ant-design-vue中对a-model使用穿透属性仍然改不了样式的解决办法
Yukinoshita_kino的博客
11-15 1万+
ant-design-vue中对a-model使用穿透属性仍然改不了样式的解决办法
antd mobile 的 Drawer点击失效以及无法弹出
Akukudeteng的博客
05-10 2326
主要有几个方面的注意点！ 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 1217
解决 react ECharts 使用antd 抽屉的时候宽度无法实现100%
ant design vue 中drawer组件没办法自适应窗口变化
qq_44361111的博客
12-10 2242
给组件设置高度，虽然是获取窗口高度，但由于只在页面加载的时候获取，所以缩放窗口时无法实现drawer组件高度自适应 一开始使用addEventListener() 方法监听窗口变化，重新赋值的方法，但是效果并不理想。于是换了一种监听方法。 首先在需要监听的对象上添加ref 然后引入用到的包（先安装再引入） import elementResizeDetectorMaker from 'element-resize-detector' 最后监听到对象大小变化时，重新给drawer的高...
vue解决antd的cascader等弹出层样式修改失效的问题
weixin_44090753的博客
06-15 1479
vue修改动态加载的元素样式
antd抽屉组件无法点击遮盖层关闭
最是人间留不住，朱颜辞镜花辞树。
08-27 515
maskClosable这个api默认开启，但是我写的时候还是无法关闭，因为我没有加上onClose方法。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值