Sider收缩文字不隐藏

  1. antd inlineCollapsed收缩时文字不隐藏，自定义菜单图标时收起菜单文字不隐藏问题
  2. 隐藏是通过.anticon+span找到的
  3. antd3x解决:在自定义图标外面加一个 <span class="anticon"></span>
    1. <Menu 
    2. theme="dark" 
    3. mode="inline" 
    4. defaultSelectedKeys={['1']}
    5. >
    6. <Menu.Item key="1">
    7.  <span class="anticon">
    8.    <Icon type="user" />
    9.    <span>nav 1</span>
    10.  </span>
    11. </Menu.Item>
    12. <Menu.Item key="2">
    13.  <Icon type="upload" />
    14.  <span>nav 2</span>
    15. </Menu.Item>
    16. </Menu>

antd4x Sider文档 https://ant.design/components/layout-cn
image.png

  1. import React, { useState } from 'react'
  2. import { Layout, Menu } from 'antd'
  3. import {
  4.   UserOutlined, UploadOutlined,
  5. } from '@ant-design/icons'
  7. const { Header, Sider, Content } = Layout
  9. function ProLayout() {
  10.   const [collapsed, setCollapsed] = useState[false]
  12.   return(
  13.     <Sider 
  14.       trigger={null} 
  15.       collapsible 
  16.       collapsed={() => setCollapsed(state => !state)}
  17.       >
  18.       <div className="logo" />
  19.       <Menu 
  20.         theme="dark" 
  21.         mode="inline" 
  22.         defaultSelectedKeys={['1']}
  23.         >
  24.         <Menu.Item key="1" icon={<UserOutlined />}>
  25.           nav 1
  26.         </Menu.Item>
  27.         <Menu.Item key="3" icon={<UploadOutlined />}>
  28.           nav 2
  29.         </Menu.Item>
  30.       </Menu>
  31.     </Sider>
  32.   )
  33. }

Sider布局报错

index.js:2177 Warning: [antd: Menu] inlineCollapsed not control Menu under Sider. Should set collapsed on Sider instead.