title: How to make HTML elements defined in JSX accept attributes?
body: <p>I am returning HTML using JSX in a react component. However, these tags do not act on the attributes provided to them in the JSX? Please check the code snippet below:</p>
  <pre><code>function NavigationBar() {
      return (
       &lt;div&gt;
          &lt;HeadBar position=&quot;static&quot; alignItems='center' &gt;
              &lt;Toolbar className=&quot;toolbar&quot; align='center' color='green'&gt;
                  &lt;Typography variant=&quot;h6&quot; color=&quot;green&quot; align='center'&gt; 
                      Welcome !!!
                  &lt;/Typography&gt;
              &lt;/Toolbar&gt;
          &lt;/HeadBar&gt;
      &lt;/div&gt;
      )
  }
  </code></pre>
  <p>In the above function(component) returning JSX, I am seeing all the default values. The attributes &quot;align&quot;, &quot;color&quot;, &quot;alignItems&quot; do not seem to have any impact. Any help will be appreciated.</p>