title: How to change color of MaterialUI outlined Button Group border in react?
body: <p>I have created a dashboard for the User/Admin panel in react project. I have used drawer buttons by applying <strong>MUI Button Group with outlined style</strong>. It provided me blue <strong>color on the button border</strong>. How can I change the border color of buttons?</p>
  <pre><code>const buttons = [
      &lt;Button key=&quot;one&quot;&gt; &lt;Link className='text-decoration-none' to=&quot;/dashboard&quot;&gt; Dashboard &lt;/Link&gt;&lt;/Button&gt;,
      &lt;Button key=&quot;two&quot;&gt;&lt;Link className='text-decoration-none' to=&quot;orders&quot;&gt;Manage Orders &lt;/Link&gt;&lt;/Button&gt;,
      &lt;Button key=&quot;three&quot;&gt;&lt;Link className='text-decoration-none' to=&quot;payment&quot;&gt;Payment &lt;/Link&gt;&lt;/Button&gt;,
      &lt;Button key=&quot;four&quot;&gt;&lt;Link className='text-decoration-none' to=&quot;review&quot;&gt; Give a Review &lt;/Link&gt;&lt;/Button&gt;,
      &lt;Button key=&quot;five&quot;&gt;&lt;Link className='text-decoration-none' to=&quot;addProduct&quot;&gt;Add a Product&lt;/Link&gt; &lt;/Button&gt;,
      &lt;Button key=&quot;six&quot;&gt;&lt;Link className='text-decoration-none' to=&quot;manageProducts&quot;&gt;Manage Products &lt;/Link&gt;&lt;/Button&gt;,
      &lt;Button key=&quot;seven&quot;&gt;&lt;Link className='text-decoration-none' to=&quot;makeAdmin&quot;&gt;Make An Admin &lt;/Link&gt;&lt;/Button&gt;,
      &lt;Button key=&quot;eight&quot;&gt;&lt;Link className='text-decoration-none' to=&quot;&quot;&gt;Log Out &lt;/Link&gt;&lt;/Button&gt;];
  
  
  const drawer = (
      &lt;div&gt;
          &lt;Link to=&quot;/&quot;&gt;
              &lt;img src=&quot;../logo1.png&quot;
                  width=&quot;200&quot;
                  height=&quot;80&quot;
                  className=&quot;d-inline-block align-top&quot; alt=&quot;B2Me logo&quot; /&gt;
          &lt;/Link&gt;
          &lt;Divider /&gt;
          &lt;div className='py-5 ps-auto' style={{ 'background-color': '#03153a' }}&gt;
              &lt;ButtonGroup
                  orientation=&quot;vertical&quot;
                  aria-label=&quot;large button group&quot;
                  variant=&quot;outlined&quot;
                  size=&quot;large&quot;
                  sx={{ p: 1, backgroundColor: 'white' }}
              &gt;
                  {buttons}
              &lt;/ButtonGroup&gt;
          &lt;/div&gt;
          &lt;Divider /&gt;
      &lt;/div &gt;
  );
  </code></pre>
  <p>`</p>
  <p><a href="https://i.stack.imgur.com/FaLGF.png" rel="nofollow noreferrer">Output Screenshot</a></p>