在垂直菜单上添加浮动标记时，分隔符消失语义UI反应

Question

我真的很困惑，我无法解决这个问题。出于演示目的，我在Semantic UI中添加了一个垂直菜单组件。正如你在第一张图片中看到的那样，一切正常，我想要它，但是当我向floated='right'添加<Menu />标签时，底部分隔线消失了。

这是应该的方式：

这是添加'floated'标签时发生的情况：

import React, { Component } from 'react'
import { Header, Menu } from 'semantic-ui-react'

export default class MenuExampleText extends Component {
   state = {}

   handleItemClick = (e, { name }) => this.setState({ activeItem: name })

   render() {
      const { activeItem } = this.state

      return (
         <Menu vertical> // <Menu vertical floated='right'> removes the divider
            <Menu.Item
               name='promotions'
               active={activeItem === 'promotions'}
               onClick={this.handleItemClick}
            >
               <Header as='h4'>Promotions</Header>
               <p>Check out our new promotions</p>
            </Menu.Item>

            <Menu.Item
               name='coupons'
               active={activeItem === 'coupons'}
               onClick={this.handleItemClick}
            >
               <Header as='h4'>Coupons</Header>
               <p>Check out our collection of coupons</p>
            </Menu.Item>

            <Menu.Item
               name='rebates'
               active={activeItem === 'rebates'}
               onClick={this.handleItemClick}
            >
               <Header as='h4'>Rebates</Header>
               <p>Visit our rebate forum for information on claiming rebates</p>
            </Menu.Item>
         </Menu>
      )
   }
}

Answer 1

除非您能够在我不确定是否有人能够帮助您之前为我们重现问题或有人遇到此问题。使用HTML重新生成菜单并使用float:right;似乎没有相同的问题。

修改：更新的代码段以更密切地关注您的codepen，并包含display: none的css修复，这是您接受的答案。

const {
  Menu,
  Header
} = semanticUIReact

class App extends React.Component {
  state = {}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      <Menu vertical style={styles.sidebarMenu} floated='right'>
        <Menu.Item
          name='promotions'
          active={activeItem === 'promotions'}
          onClick={this.handleItemClick}
        >
          <Header as='h4'>Promotions</Header>
          <p>Check out our new promotions</p>
        </Menu.Item>

        <Menu.Item
          name='coupons'
          active={activeItem === 'coupons'}
          onClick={this.handleItemClick}
        >
          <Header as='h4'>Coupons</Header>
          <p>Check out our collection of coupons</p>
        </Menu.Item>
        
        <Menu.Item
          name='deals'
          active={activeItem === 'deals'}
          onClick={this.handleItemClick}
        >
          <Header as='h4'>Deals</Header>
          <p>Check out our collection of deals</p>
        </Menu.Item>

        <Menu.Item
          name='rebates'
          active={activeItem === 'rebates'}
          onClick={this.handleItemClick}
        >
          <Header as='h4'>Rebates</Header>
          <p>Visit our rebate forum for information on claiming rebates</p>
        </Menu.Item>
      </Menu>
    )
  }
}

const styles = {
  sidebarMenu: {
        marginLeft: 0,
        marginRight: 0,
        height: '100vh'
    },
}

// ----------------------------------------
// Render
// ----------------------------------------
const mountNode = document.getElementById('react-app-mount')
ReactDOM.render(<App />, mountNode)

.ui.floated.menu .item:last-child:before { 
  display: block !important;
 }

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://unpkg.com/semantic-ui-react/dist/umd/semantic-ui-react.min.js"></script>

<div id="react-app-mount"></div>