chefcurry7 chefcurry7 - 21 days ago 14
React JSX Question

Material-ui horizontal menu

I'm trying to create a horizontal menu component from material UI but it seems I'm unable to as all the list items are wrapped inside a

<div>


The docs show a vertical menu list

What works is if I remove all the outer
divs
inside the span, and remove the
display: block
style applied to the span.

<div style="padding: 8px 0px;">
<div>
<span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;">
<div>
<div style="margin-left: 0px; padding: 16px; position: relative;">
<div>Inbox</div>
</div>
</div>
</span>
</div>
<div>
<span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;">
<div>
<div style="margin-left: 0px; padding: 16px; position: relative;">
<div>Starred</div>
</div>
</div>
</span>
</div>
<div>
<span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;">
<div>
<div style="margin-left: 0px; padding: 16px; position: relative;">
<div>Sent mail</div>
</div>
</div>
</span>
</div>
<div>
<span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;">
<div>
<div style="margin-left: 0px; padding: 16px; position: relative;">
<div>Drafts</div>
</div>
</div>
</span>
</div>
<div>
<span tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; transform: translate(0px, 0px); color: rgba(0, 0, 0, 0.870588); line-height: 16px; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; background: none;">
<div>
<div style="margin-left: 0px; padding: 16px; position: relative;">
<div>Inbox</div>
</div>
</div>
</span>
</div>
</div>

Answer

Set the CSS className on the Menu that styles its immediate DIV children with "display: inline-block"

Working jsFiddle: https://jsfiddle.net/d980vcon/2/

in CSS:

.horiz-menu > div {
  display: inline-block;
}

In JSX:

class Example extends React.Component {
  render() {
    return (
      <Menu className="horiz-menu">
        <MenuItem primaryText="Home"/>
        <MenuItem primaryText="Test Menu 1" />
        <MenuItem primaryText="Test Menu 2" />
        <MenuItem primaryText="About" />
      </Menu>
    );
  }
}