ant design Menu组件子菜单样式设置

Menu二级子菜单宽度较宽，直接设置width不起作用,会被他自带的min-width覆盖

解决办法：设置组件的全局样式，提升优先级，如下所示：

<style lang="less">
// 设置菜单项样式
.ant-menu-item {width: 90px;height: 26px !important;line-height: 26px !important;margin: 0 !important;padding: 0 8px !important;
}// 设置菜单项鼠标滑过样式
.ant-menu-item-active {background-color: #317cd7 !important;color: #fff !important;
}// 设置子菜单样式
.ant-menu-submenu > .ant-menu {width: 100px;min-width: 100px;
}
</style>

ant design Menu组件子菜单样式设置相关推荐

Ant Design Pro组件pro-layout菜单自定义icon，以及二级菜单不显示icon处理
使用IconFont IconFont官网,进入后我们登陆,然后创建一个项目管理图中的连接是Icon的地址,需要把它放到我们项目配置下的iconfontUrl参数下注意!!! 创建项目时 Font ...
ant design pro侧边栏子菜单添加不成功的解决办法
项目场景: Ant design pro侧边栏添加子菜单问题描述: 在企业工作中 Ant design pro侧边栏添加子菜单如果不成功要检查以下几个部分原因分析: 刚进公司的新员工如果接触到新的 ...
React Ant Design Menu导航菜单跳转
昨天小编在学习React使用Ant Design Menu导航菜单时,发现Ant Design4.2版本之后的 Menu 导航菜单更新了写法.新写法不再需要自行拼接 JSX,直接采用数组写法直接用 i ...
Ant Design Blazor 组件库的路由复用多标签页介绍
前言 Blazor 是 .NET 最新的前端框架,可以基于 WebAssembly 或 SignalR (WebSocket)构建前端应用程序,基于 WebAssembly 托管模型的 Blazor ...
【前端笔记】Ant Design Form组件 resetFields() 与 setFieldsValue() 之比较
Ant Design Form组件 resetFields() 与 setFieldsValue() 之比较关键词:React,Ant Design,Form组件,组件渲染一.问题描述 Form ...
解决使用vue-awesome-swiper组件分页器pagination样式设置失效问题
解决使用vue-awesome-swiper组件分页器pagination样式设置失效问题参考文章: (1)解决使用vue-awesome-swiper组件分页器pagination样式设置失效问题 ...
ant design vue 组件 Tree
ant design vue 组件 Tree 实现效果: 实现代码: <div class="tree"><a-treeshow-iconshow-line:lo ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
Ant Design Vue 组件@chang绑定方法如何传递自定义参数
Ant Design Vue 组件@chang绑定方法如何传递自定义参数今天在写代码的时候遇到一个问题: 在嵌套标签中外层使用了一个v-for循环去循环一个数组,当内层想要拿取index,并且使用 ...

ant design Menu组件子菜单样式设置

ant design Menu组件子菜单样式设置

ant design Menu组件子菜单样式设置相关推荐

最新文章

热门文章