語義 UI 側邊欄問題（側邊欄分隔線不可見）

Question

我在側邊欄中有“主頁”、“聯系人”和“關於”菜單，我希望在這些菜單之間有一條分隔線。 在語義 UI 中反應顯示這些分離但在屏幕上不顯示。 我的 React 代碼如下

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;

運行我的代碼后，我得到了這種類型的 output（下圖為 Output）當前 Output

但是我想要這種類型的 output（下） 必填 Output

Answer 1

添加分隔線的 2 種方法-

1. 使用語義 ui 反應
2. 使用香草 CSS

---

1. 使用語義 ui 反應

從 semantic-ui-react 導入 Divider。

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

並在第一個和第二個 Menu.Item 之后添加這行代碼

<Divider fitted />

2. 使用香草 CSS

在 styles.css 添加 -

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

這將為每個項目添加邊框底部。