我有主页,联系人和关于菜单在侧边栏,我想这些菜单之间的分隔线。在语义UIReact显示这些分隔,但在屏幕上没有显示。我的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;
运行我的代码后,我得到了这种类型的输出(输出图像如下)当前输出
但我想要这种类型的输出(如下)
1条答案
按热度按时间shyt4zoc1#
添加分隔符的两种方法-
1.使用语义UIReact
1.使用Vanilla CSS
1.使用语义UIReact
从semantic-ui-react导入分隔符。
并将这行代码添加到第一个和第二个Menu.Item之后
1.使用Vanilla CSS
在styles.css中添加-
这将为每个项目添加border-bottom。