在垂直菜单语义上添加浮动标签时分隔线消失 UI React

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; 似乎没有相同的问题。

编辑：更新了代码片段以更紧密地遵循您的代码笔，并包括 css 对 display: none 的修复，这是您接受的答案。

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>

Answer 2

对于未来的观众，我想出的最佳解决方案是在您向右浮动的菜单项中创建第二个菜单。这应该使它看起来正常

在垂直菜单语义上添加浮动标签时分隔线消失 UI React

Divider Disappears When Adding Floated Tag on Vertical Menu Semantic UI React

html

css

reactjs

semantic-ui-react