title: Material-UI: How to specify maxWidth of Chip?
body: <p>My chips might contain very long strings, so I would like to limit the width of the chip, and show the full text in a Tooltip.</p>
  
  <p>However when I try to change the maxWidth, it only ends up changing the width of the grey, pill-shaped part of the Chip -- the label continues to overflow, and the "delete" button also gets out of place and appears outside the chip.</p>
  
  <p>Normal:
  <a href="https://i.stack.imgur.com/Xtt2m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xtt2m.png" alt="enter image description here"></a></p>
  
  <p>After applying maxWidth:
  <a href="https://i.stack.imgur.com/QDuEa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QDuEa.png" alt="enter image description here"></a></p>
  
  <p>I have tried using inline style={{}} prop, as well as trying the "withStyles" approach to create my own custom styled Chip, but both have the same effect.</p>
  
  <p>I modified the Chip example from Material-UI docs to demonstrate the issue: <a href="https://codesandbox.io/s/material-demo-zt72h" rel="nofollow noreferrer">https://codesandbox.io/s/material-demo-zt72h</a></p>
  
  <p>Edit: If I also adjust the 'overflow' styling, it's <em>almost</em> there, but all I see is a truncated section from the <em>middle</em> of the string, no ellipsis, and the delete button has disappeared:</p>
  
  <p><a href="https://i.stack.imgur.com/CL9Ov.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CL9Ov.png" alt="enter image description here"></a></p>
  
  <pre><code>  chip: {
      maxWidth: 100,
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis"
    }
  </code></pre>