title: How to align a Button to the far right in MUI AppBar?
body: <p>I'm having trouble understanding how to align items in MUI. I have the following code:</p>
  <pre class="lang-js prettyprint-override"><code>class SignUpForm extends React.Component {
      render() {
          return (
              &lt;Button sx={{ justifyContent: &quot;flex-end&quot; }}
                  color=&quot;inherit&quot; }&gt;Sign Up&lt;/Button&gt;
          )
      }
  }
  </code></pre>
  <p>which is composed by:</p>
  <pre class="lang-js prettyprint-override"><code>class Nav extends React.Component {
      render() {
          return (
              &lt;Box sx={{ flexGrow: 1}}&gt;
                  &lt;AppBar position=&quot;static&quot;&gt;
                      &lt;Toolbar&gt;
                          &lt;SignUpForm /&gt;
                      &lt;/Toolbar&gt;
                  &lt;/AppBar&gt;
              &lt;/Box&gt;
          )
      }
  }
  </code></pre>
  <p>But unfortunately the content is still staying to the left. Using this resource <a href="https://mui.com/system/properties" rel="nofollow noreferrer">https://mui.com/system/properties</a>, I might be missing an important CSS concept here. Could anyone enlighten me?</p>
  <p><a href="https://i.stack.imgur.com/EO788.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EO788.png" alt="enter image description here" /></a></p>
  <p>Thank you.</p>