antd-修改子菜单区域外背景颜色（修改antd组件样式）

最新推荐文章于 2025-02-18 11:55:25 发布
最新推荐文章于 2025-02-18 11:55:25 发布
阅读量1.4w 收藏 2
点赞数 3
分类专栏： Reactjs 前端 HTML 文章标签： javascript css css3 html5 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45948996/article/details/106539501
版权

目的：修改antd子菜单背景颜色
在这里插入图片描述
方法：在子菜单按钮外区域右键检查
在这里插入图片描述
查看样式，此处为例修改.ant-menu-dark .ant-menu-inline.ant-menu-sub处可调整子菜单背景颜色
在这里插入图片描述
在这里插入图片描述
在less文件中正式修改颜色
在这里插入图片描述

antd menu 样式修改
咿呀咿呀呦~
08-30 1万+
记录一下antd 中,table 样式修改, 方便大家快速使用 基本上按照以下代码修改相应颜色即可 // 设置菜单样式 .ant-menu,.ant-menu-sub,.ant-menu-inline{ color: white; background-color: #044d50 !important; } // 设置子菜单展开样式 .ant-menu-submenu > .ant-menu { background-color: rgb(16, 71, 83) !important;
Ant design vue中实现动态更换主题色
weixin_43225598的博客
09-03 9887
Ant design vue中实现动态更换主题色 一、 使用的插件 “ant-design-vue”: “^1.6.5” “antd-theme-generator”: “^1.1.7”，实现动态更换主题色的核心插件 “less”: “^2.7.3”,超过2.7版本实现动态更换主题色会有问题。建议版本2.7.3 二、 实现步骤 （一）插件安装 1、 使用脚手架搭建Vue项目 2、 使用yarn add ant-design-vue安装UI库 3、 因为ant-design-vue是依赖于less进行开发因此
Ant Design Pro修改菜单栏的颜色
像鱼的博客
07-06 1784
umi框架修改菜单配置，ant design pro修改菜单配色
ant-design的＜Tabs /＞ 如何更改激活样式修改
最新发布
GISer help GISer
02-18 339
【代码】如何更改ant-design的＜Tabs /＞ 激活样式修改。
antd下拉选择框，hover和选中时背景颜色修改
马娟的博客
10-30 9054
.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled),.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled){ background-color:#E5F2FF; }
不使用样式覆盖修改ant-design-vue菜单颜色
qq_41329287的博客
02-23 1596
【代码】不使用样式覆盖修改ant-design-vue菜单颜色。
ant-design-vue修改主题配色 修改左侧菜单颜色
周18的碎碎念
03-14 1万+
看了好多其他人写的文档 看的我放佛一个弱智 然后到官网的文档上找到了解决办法 这部分的颜色都被我换了 更改方式 1 在这里找到你要修改的组件的‘名称‘ 2然后修改颜色就ok了 不建议自己写样式去覆盖ant自带的样式，问题非常多 ...
antdv中 改变select颜色的方法
weixin_43814775的博客
01-24 3628
antdv中 改变select颜色的方法 直接进入主题 1. 这是Vue template中的其中模板 <div class="test"> <a-select default-value="lucy" style="width: 120px" @change="handleChange"> <a-select-option value="jack"> Jack </a-select-o
React-antd组件库 - 让Menu子菜单项水平排列 - 下拉菜单排序 - 自定义子菜单展示方式
Rudon滨海渔村的博客
12-16 717
SubMenuType的popupClassName是子菜单样式 = hover弹出二级菜单的dom外部类名
【React-admin】构建React应用（8）-antd默认样式的修改，不影响其他组件
chenqk_123的专栏
03-09 1728
在使用antd的时候，由于需求的时常变更或者默认样式不满足产品需求。需要我们前端人员在使用antd组件的时候需要去修改其默认组件属性。 antd的大部分组件都可以通过global来去重新设置样式(注意这里使用的是less)，我们常用的方式就是这样： <div styleName="root"></div> .root { height: 100%; :global { .role-table { cursor: pointer; } } }
antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1447
antd-react 组件库工作以来的总结
前端学习-Antd 组件库基础
qq_48772498的博客
04-01 1万+
一.通用组件 1. Icon 图标，用于语义化的表示一些业务场景，比如：购物车、收藏夹、搜索、重置。 典型场景： 方向性图标 提示建议性图标 编辑类图标 数据类图标 品牌和标识 网站通用图标 2. Button 按钮用于开始一个即时操作。 典型场景： 跳转页面 唤起弹窗 触发行为：提交表单；删除；下载文件；搜索 二.布局组件 三.数据展示组件 四.反馈类组件 五.数据录入组件 ...
修改antd默认树选择器下拉菜单中的勾选框颜色
qq_24385297的博客
06-26 1153
【代码】修改antd默认树选择器下拉菜单中的勾选框颜色。
react 中改antd中的颜色(注意: 这里使用的是css module)
MsimonBlowSnow的博客
02-03 3018
1.react 中修改antd中的颜色 1.首先找到你要修改颜色的颜色例如: 例如下图: 这是一个正常的使用antd中Buttom组件， 改变这个组件的样式 //若果使用的是css module 加载的话,你在less或sass中写，你会发现不会改变颜色，即使使用!important .ant-btn-primary{ color: #fff; background: red !important; border-color: red; text-shadow: 0 -
vb设置excel 字体 加粗 微软雅黑_把excel2010的默认字体更改为雅黑
weixin_39553904的博客
12-14 608
很多人在使用excel的时候都喜欢个性化设置，比如设置个图片当作excel的背景，或则是把excel默认打开的字体换一下，特别是雅黑字体刚出来的时候，很多人都把excel2010的默认字体更改为雅黑的，今天我们就来学习下如何修改excel软件的字体。1、在EXCEL2010文件中找到选项，打开EXCEL2010的选项对话框，在左侧点击常规，右侧中下部有一个名为“新建工作簿时”的区域，在这里，我们可...
ant组件后背景图设置
weixin_48907405的博客
07-10 755
【代码】ant组件后背景图设置。
antd select option 设置字体颜色_匹配颜色是照片合成重要关键点
weixin_30033489的博客
12-24 922
在Photoshop中组合照片(也称为照片合成)时，不同的照片通常不匹配。颜色和色调是不同的，这会使最终的合成物看起来很假。我将向您展示如何匹配图层并将它们融合在一起，以便您的照片拼贴看起来很真实，以至于真实的人不会知道您是在Photoshop中完成的。最好的部分？实际上非常简单。步骤1选择顶层后，选择“图像”>“调整”>“配色”我们需要选择与之匹配的东西。将源设置为当前窗口(文档)的...
如何修改antd里Select的样式？？？？？
热门推荐
Dark_programmer的博客
08-18 2万+
如何修改antd里Select的样式？？？？？antd的Select antd的Select 附一个官网链接 antd Select 官方给出的框架用起来是很方便，但是美观程度差强人意，给出的API里虽有className属性，但是这是进行修改Option的样式 那如何修改Select的样式呢？ 废话不多说，直接上代码 :global{ .ant-select-selection{ // antd 版本3.* // 你想要的样式 } .ant-select-selector{ /
ant design vue 在线自定义更换主题颜色
qq_34164252的博客
12-20 6565
先看demo 源码 原文地址 看到ant design pro 上的 主题颜色更换 感觉挺酷的 就研究了一下 ， 因为最近想用vue 重写一版博客 所有就 用的 vue + ant design 做的这个demo 1 创建项目 用vue cli 创建项目之后 需要先安装以下两个 插件 第一个是 ui 都知道 第二个是 用来改变颜色的插件 “ant-design-vue”: “^1.4.8”, “a...
antd tree 子菜单横向排布
07-13
要在 Ant Design 中实现 Antd Tree 子菜单横向排布，你可以使用 `a-tree` 组件的 `treeNodeFilterProp` 属性和自定义样式来实现。以下是一个示例代码： ```jsx import { Tree } from &#39;antd&#39;; const { TreeNode } = Tree; const treeData = [ { title: &#39;Node 1&#39;, key: &#39;0-0&#39;, children: [ { title: &#39;Child Node 1&#39;, key: &#39;0-0-0&#39;, children: [ { title: &#39;Grandchild Node 1&#39;, key: &#39;0-0-0-0&#39;, }, { title: &#39;Grandchild Node 2&#39;, key: &#39;0-0-0-1&#39;, }, ], }, { title: &#39;Child Node 2&#39;, key: &#39;0-0-1&#39;, }, ], }, { title: &#39;Node 2&#39;, key: &#39;0-1&#39;, children: [ { title: &#39;Child Node 3&#39;, key: &#39;0-1-0&#39;, }, { title: &#39;Child Node 4&#39;, key: &#39;0-1-1&#39;, }, ], }, ]; const TreeComponent = () => { return ( <Tree treeData={treeData} treeNodeFilterProp="title" defaultExpandAll style={{ width: &#39;100%&#39; }} switcherIcon={<></>} showLine={{ showLeafIcon: false }} className="horizontal-tree" > {renderTreeNodes(treeData)} </Tree> ); }; const renderTreeNodes = (data) => { return data.map((item) => { if (item.children) { return ( <TreeNode title={item.title} key={item.key}> {renderTreeNodes(item.children)} </TreeNode> ); } return <TreeNode {...item} />; }); }; export default TreeComponent; ``` 然后，你可以在 CSS 文件中添加以下样式： ```css .horizontal-tree .ant-tree-node-content-wrapper { display: inline-block; } ``` 这样，子菜单就会横向排布了。你可以根据需要进行样式调整和修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青衫旧路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值