语义 UI 侧边栏问题（侧边栏分隔线不可见）

Question

I have Home, Contact and About menu in sidebar and I want a separation line between these menus. In semantic UI react showing these separations but on screen not showing. My React code is below

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.Item
          name='Contact'
          active={activeItem === 'Contact'}
          onClick={this.handleItemClick} 
        >
          Contact
        </Menu.Item>
        <Menu.Item
          name='About'
          active={activeItem === 'About'}
          onClick={this.handleItemClick} 
        >
           About
        </Menu.Item> 
        </Sidebar>
      </div>
    )}}
    export default SidebarComponent;

After running my code I got this type of output ( Output image below) Current Output

But I want this type of output (below) Required Output

Answer 1

2 ways in which you can add a divider-

1. Using semantic-ui-react
2. Using Vanilla CSS

---

1. Using semantic-ui-react

import Divider from semantic-ui-react.

import { Sidebar, Menu, Divider } from 'semantic-ui-react'

And add this line of code after the first and second Menu.Item

<Divider fitted />

2. Using Vanilla CSS

in styles.css add -

.ui.vertical.menu .item{
  border-bottom: 1px solid #000000;
}

this will add border-bottom for every item.