title: change style of material-ui checkbox
body: <p>I am using React for my project and <code>styled-component</code> package for styling, but I have problem with styling the Material-ui checkbox with styled-component. I need to narrow the border of checkbox, but I can't find any interface of the Material-ui for styling the border width. </p>
  
  <p>This is my current code:</p>
  
  <pre><code>const StyledCheckbox = styled(Checkbox)`
    svg{
      color: #CDCDCD;
      font-size: 30px;
    }
  `
  </code></pre>
  
  <p>for styling the <code>svg</code> of checkbox component. I don't know which <code>props</code> of <code>svg</code> deal with the border width of the <code>svg</code>. I have tried some <code>props</code> like <code>font-weight</code>, <code>border-width</code>, but they both doesn't work. </p>
  
  <p>Codesandbox button: <a href="https://codesandbox.io/s/vv50o01x2l?fontsize=14" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit vv50o01x2l"></a></p>
  
  <p>expected result:</p>
  
  <p><a href="https://i.stack.imgur.com/YrODn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YrODn.png" alt="enter image description here"></a></p>
  
  <p>current result: </p>
  
  <p><a href="https://i.stack.imgur.com/gsTrJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gsTrJ.png" alt="enter image description here"></a></p>