title: Is there a way to increase the border thickness of outlined buttons in material-ui?
body: <p>I am making changes to a user interface designed with Material-UI components and I have been requested to make the borders of some outlined buttons wider. Is there a way I can accomplish this using component props, themes, or styles?</p>
  
  <p>This is the code for the two buttons I'm trying to draw along with the style and theme I'm currently using: </p>
  
  <pre><code>const style = {
    play: {
      margin: 5,
      padding: 0,
      colorInherit: 'linear-gradient(45deg, #38e438 30%, #58e458 90%)',
    },
    play_disabled: {
      margin: 5,
      padding: 0,
      background: '#222',
    },
    clear: {
      margin: 5,
      marginRight: 10,
      padding: 0,
      background: 'linear-gradient(45deg, #FE3B3B 30%, #FF3B3B 90%)',
     },
    clear_disabled: {
      margin: 5,
      marginRight: 10,
      padding: 0,
      background: '#222',
    },
    default: {
      margin: 2,
      padding: 0,
      color: '#fff',
    },
    disabled: {
      margin: 2,  
      padding: 0,
      color: '#777',
    },
  };
  const theme = createMuiTheme({
    palette: {
      primary: {
        main: "#777",
      }
    }
  });
  &lt;MuiThemeProvider theme={theme}&gt;
    &lt;Tooltip title="Render" placement="bottom-start"&gt;
      &lt;Button
        id="play-btn"
        variant="outlined"
        size="small"
        onClick={this.handleRender}
        color="primary"
        className="header-btn"
        style={this.props.layoutType === layoutTypes.REFERENCE ? style.play_disabled : style.play}
        disabled={this.props.layoutType === layoutTypes.REFERENCE}&gt;
        &lt;Icon className="material-icons" style={{ color: '#777' }}&gt;play_arrow&lt;/Icon&gt;
      &lt;/Button&gt;
    &lt;/Tooltip&gt;
    &lt;Tooltip title="Stop" placement="bottom-start"&gt;
      &lt;Button
        id="stop-btn"
        variant="outlined"
        size="small"
        onClick={this.clear}
        color="primary"
        className="header-btn"
        style={this.props.layoutType === layoutTypes.REFERENCE ? style.clear_disabled : style.clear}
        disabled={this.props.layoutType === layoutTypes.REFERENCE}&gt;
        &lt;Icon className="material-icons" style={{ color: '#777' }}&gt;stop&lt;/Icon&gt;
      &lt;/Button&gt;
    &lt;/Tooltip&gt;
  &lt;/MuiThemeProvider&gt;
  </code></pre>
  
  <p>This is how it looks as of right now: <a href="https://imgur.com/C6Ar80r" rel="noreferrer">https://imgur.com/C6Ar80r</a>. I just want the border to be a tad thicker, and I'd appreciate the help. Thanks!</p>