Semantic UI React侧边栏分隔线不显示问题求助

要在侧边栏的菜单选项之间显示分隔线，你需要在对应的Menu.Item之间显式添加Menu.Divider组件。Semantic UI React的Menu组件不会自动为菜单项添加分隔线，必须手动插入分隔线组件。

修改后的代码如下：

import "./styles.css";

import React, { Component } from 'react'
import { Sidebar, Menu } from 'semantic-ui-react'
export class SidebarComponent extends Component {
  state = { activeItem: 'Home' }
  handleItemClick = (e, { name }) => this.setState({ activeItem: name })
  render() {
    const { activeItem } = this.state

    return (
      <div>
        <Sidebar
          as={Menu}
          animation='overlay'
          icon='labeled'
          inverted
          vertical
          visible
          width='small'
        >
          <Menu.Item
            name='Home'
            active={activeItem === 'Home'}
            onClick={this.handleItemClick}
          >
            Home
          </Menu.Item>
          
          {/* 添加菜单分隔线 */}
          <Menu.Divider />
          
          <Menu.Item
            name='Contact'
            active={activeItem === 'Contact'}
            onClick={this.handleItemClick}
          >
            Contact
          </Menu.Item>
          
          {/* 添加菜单分隔线 */}
          <Menu.Divider />
          
          <Menu.Item
            name='About'
            active={activeItem === 'About'}
            onClick={this.handleItemClick}
          >
            About
          </Menu.Item>
        </Sidebar>
      </div>
    )
  }
}
export default SidebarComponent;

说明 #

• Menu.Divider组件会在菜单中生成一条水平分隔线，自动适配当前Menu的样式（包括你设置的inverted深色主题）。
• 将分隔线插入到需要区分的菜单项之间，就能实现你期望的分隔效果，与提供的期望输出截图一致。

内容的提问来源于stack exchange，提问作者Ranga chimalgi