React修改antd默认组件样式(:global使用)调整SubMenu框的ant-menu-submenu-arrow伪类元素

最新推荐文章于 2024-06-27 10:59:14 发布

孜然卷k

最新推荐文章于 2024-06-27 10:59:14 发布

阅读量1k

点赞数

文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/M_E_i/article/details/131397270

版权

文章讲述了如何在AntDesign的菜单组件中，通过接收后端数据来决定部分菜单项是否显示箭头。通过添加className并应用CSS样式，实现了对.ant-menu-submenu-arrow元素的display属性控制，从而达到动态隐藏或显示箭头的效果。

摘要由CSDN通过智能技术生成

需求：现在的列表都带有箭头，现在需要根据后端数据，控制部分显示箭头，部分影藏

附上代码：

<Menu mode="vertical" >
  <SubMenu
    key={item.id}
    title={
      <div style={{ color: '#595959', fontSize: 16, paddingBottom: 10 }}>{item.name}</div>
    }
  >
    <Menu.ItemGroup ></Menu.ItemGroup >
  </SubMenu>
</Menu>

这时候需要通过使用控制台定位元素

可以看到我们要控制的元素是在ant-menu-submenu-title这个className元素下的

.ant-menu-submenu-arrow::before,

.ant-menu-submenu-arrow::after，

这两个元素

给元素加上className样式

<Menu mode="vertical" >
  <SubMenu
     <!-- itemVis为判断是否显示字段 -->
    className={itemVis ? '' : styles.visRights}
    key={item.id}
    title={
      <div style={{ color: '#595959', fontSize: 16, paddingBottom: 10 }}>{item.name}</div>
    }
  >
    <Menu.ItemGroup ></Menu.ItemGroup >
  </SubMenu>
</Menu>

.visRights {
  :global {
    .ant-menu-submenu-title {
      .ant-menu-submenu-arrow::before,
      .ant-menu-submenu-arrow::after {
        display: none !important;
      }
    }
  }
}