Ant Design Pro修改菜单栏的颜色

一：修改菜单栏的配色

第一步： 修改defaultSetting--> ProLayoutProps  中的属性值

sider: {
  colorMenuBackground: '#fff', // menu 的背景颜色
  colorBgMenuItemHover: '#91d5ff', // menuItem 的 hover 背景颜色
  colorTextMenu: '#607AAF', // menuItem 的字体颜色
  colorTextMenuSelected: '#3497ff', // menuItem 的选中字体颜色
  colorTextMenuItemHover: '#607AAF', // menuItem 的 hover 字体颜色
  colorTextMenuActive: '#607AAF', // menuItem hover 的选中字体颜色
},

第二步：修改全局glable样式

这个菜单第一层，第二层菜单都得设置颜色，因为每一层的class名字不一样

.ant-menu-item-selected  {
  color: #fff !important;
  background: linear-gradient(to right, #B5E8ED , #2183D9);
}
.ant-menu-item:not(.ant-menu-item-selected):hover {
  background: linear-gradient(to right, #B5E8ED , #2183D9) !important;
}
.ant-menu-light:not(.ant-menu-horizontal) .ant-menu-submenu-title:hover{
  background: linear-gradient(to right, #B5E8ED , #2183D9) !important;
}

二：修改菜单顶部内容及样式

修改配置文件中的title

实现这个功能后，可能会有一个关于findDOMNode的警告，我至今没有解决，如果您解决了，可以评论告诉一下我方法哦~，谢谢！

 配置全局颜色,global.less文件

.ant-pro-global-header-logo > a > h1 {
  color: #008CD6;
  padding-left: 12px;
  padding-top: 4px;
  font-size: 17px;
  margin-left: -2px;
  &:before {
    content: "";
    width: 2px;
    height: 14px;
    display: inline-block;
    margin-right: 10px;
    margin-left: -2px;
    background-color: #D3D7DA;
  }
}

三：菜单栏底部增加图片

其实它还是修改link,所以还是会全局修改样式

配置app.tsx中的 links 就行

links: [
  <Link key="logokey" to="/">
    <img src={linksImg} alt="" style={{ width: 110, height: 114, marginLeft: 22, marginTop: 14 }} />
  </Link>,
],

 配置全局样式，global.less文件

.ant-pro-sider-links {
  height: 150px;
  .ant-pro-sider-link-menu {
    width: 100%;
    height: 100%;
    >li {
      width: 100%;
      height: 100%;
      padding-left: 20%;
      padding-top: 5%;
      opacity: 0.5;
    }
  }
}