antd menu 样式修改

记录一下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-menu-submenu-title{color: white !important;
}
// 去掉右边框
.ant-menu-inline {border: none;margin: 0px;
}
// 设置 a 链接样式
.ant-menu-item a {color: white !important;
}
.ant-menu-item a:hover {color: #044d50 !important;
}
.ant-menu-item a:active:before {color: #044d50 !important;
}
.ant-menu-item a:active:after {color: #044d50 !important;
}
// 下拉箭头样式
.ant-menu-submenu-arrow {color: white !important;
}// 菜单收缩样式
.ant-menu.ant-menu-inline-collapsed {width: 60px;
}
// 设置收缩后的右边框
.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {border-right: none;
}
// 气泡框样式
.ant-tooltip-inner,.ant-tooltip-arrow-content{background-color: rgb(16, 71, 83) !important;
}
.ant-tooltip-inner a {color: white !important;
}
// 收缩的样式
.ant-layout-sider-trigger {background-color: rgb(4, 77, 100) !important;
}
// sider 的背景色
.ant-layout-sider {background-color: #044d50 !important;
}// 选中菜单状态
.ant-menu-item-selected {background-color: rgb(4,77,92) !important;color: white !important;
}
// 设置未选中菜单项鼠标滑过样式
.ant-menu-item-active {background-color: #fff !important;color: #666666 !important;
}

切记:

.ant-menu-item-selected 和  .ant-menu-item-active 先后顺便不能乱, 否则点击菜单后样式错乱

antd menu 样式修改相关推荐

antd table 样式修改
.ant-table-wrapper {width: 98%;height: 100%;position: relative;top: 30px; } .ant-table {background-c ...
Antd a-menu 样式修改
必须加一层div包裹才有效!!!! #top {//悬浮,选择颜色:deep(.ant-menu-horizontal:not(.ant-menu-dark)>.ant-menu-item :h ...
Antd Pro V4 样式修改大全（有图有真相）
Antd Pro V4 样式修改大全一.左侧菜单的logo和标题 (1)logo修改 BasicLayout.jsx import logo from '../assets/example.jpg' ...
React Antd中样式的修改
如果需要对antd的样式进行修改, 进入你要修改的页面注意:不能直接在自己的文件下面,加入一个css,修改这个class的样式,应该加入global限定,global {} , 在{}里面写入 . ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
Antd select dropdown 样式修改
Antd select dropdown 样式修改官网提供了dropdownClassName属性,链接测试代码: <template><div class="sele ...
antDesign menu 自定义修改选中样式，一级和多级菜单
antDesign menu 自定义修改选中样式,一级和多级菜单项目里一级菜单和二级菜单都存在的情况下,需要对选中的父级菜单做高亮选中状态问题描述二级和一级菜单互不影响选中(我这都选中了) .a ...
哀悼日网页彩色变黑白方法-css样式修改
哀悼日网页彩色变黑白方法-css样式修改 (2010-04-21 09:16:35) 转载▼ 标签: 默哀哀悼黑白分类: 技术全国默哀日,很多网站的图片等都变成了黑白色,修改页面的样式即可实现 ...
react鼠标移入移出样式修改
解决react鼠标移入移出样式修改的问题. 效果截图: 代码实现: js代码: <div className={styles.listStyle}><MenuonClick={thi ...
html input type=quot;filequot;,科技常识：关于type=quot;filequot;的input框样式修改小结...
今天小编跟大家讲解下有关关于type="file"的input框样式修改小结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于type="file" ...

antd menu 样式修改

antd menu 样式修改相关推荐

最新文章

热门文章