语义 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;

运行我的代码后，我得到了这种类型的输出（下面的输出图像） Current Output

但我想要这种类型的输出（下） Required Output

Answer 1

添加分隔线的 2 种方法-

1. 使用 semantic-ui-react
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;
      }
      

      这将为每个项目添加边框底部。