title: How to align Material-UI Menu items?
body: <p>I use the menu and menu item of material-ui to build a select dropdown menu, but I found one thing strange: the dropdown menu always expand to the left side of the box, as the image shown below:
  <a href="https://i.stack.imgur.com/ykRrp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ykRrp.jpg" alt="enter image description here" /></a></p>
  <p>I've tried to use the <code>alignItems</code> property inside my <code>&lt;MenuItem&gt;</code> but it didn't work.</p>
  <p>My code is shown below. Can anybody help me to fix this problem? I really appreciate your help!</p>
  <pre><code>          &lt;Menu
              id=&quot;order-menu&quot;
              anchorEl={anchorEl}
              keepMounted
              open={Boolean(anchorEl)}
              onClose={() =&gt; setAnchorEl(null)}
            &gt;
              {options.map((option, index) =&gt; (
                &lt;MenuItem
                  key={option}
                  selected={index === selectedIndex}
                  onClick={(event) =&gt; handleMenuItemClick(event, index)}
                &gt;
                  {option}
                &lt;/MenuItem&gt;
              ))}
            &lt;/Menu&gt;
  </code></pre>