antd menu 样式修改

最新推荐文章于 2024-07-06 15:11:49 发布

咿呀咿呀哟~~

最新推荐文章于 2024-07-06 15:11:49 发布

阅读量1.3w

点赞数 16

分类专栏：前端基础文章标签： css react.js ant

本文链接：https://blog.csdn.net/qq_36123470/article/details/119992858

版权

本文档详细介绍了如何在antd中修改Table组件的样式，提供了一种快速定制颜色的方法，帮助开发者更便捷地调整UI。

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

记录一下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