<p dir="auto">Apologies if this comes across as noise. Just getting into react</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">No errors?</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">An error is printed to the console</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>create a new project with create-react-app</li>
<li>Install material-ui@next, material-ui-icons</li>
<li>Render an svg icon in the App.js template</li>
<li>Check the console</li>
</ol>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2380692/30196230-a7072788-9424-11e7-9b4b-f244f646543c.png"><img src="https://user-images.githubusercontent.com/2380692/30196230-a7072788-9424-11e7-9b4b-f244f646543c.png" alt="screenshot_20170907_233020" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">I've been learning react for a few weeks now, and I decided to try upgrading the app to the new fiber RC.</p>
<p dir="auto">After, updating, I discovered this error in the console.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>beta-8</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 60</td>
</tr>
<tr>
<td>material-ui-icons</td>
<td>beta-5</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Typography offers noWrap feature that allows one to ellipsize text if it is larger than its container. This behavior should also be available when typography is used within Grid Item.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">When typography is used within a Grid Item, it does not implement ellipses and results in expanding width of grid item. </p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li><a href="https://codesandbox.io/s/ppy3zrj270" rel="nofollow">https://codesandbox.io/s/ppy3zrj270</a><br>
In this demo example, In Output, First line shows Text in Typography works as expected.<br>
and in Second line Text in Typography is not truncated with ellipses and comes out of grid.</li>
<li><a href="https://codesandbox.io/s/38nj34826" rel="nofollow">https://codesandbox.io/s/38nj34826</a><br>
In this demo example, There are two grid items and they should always be in a row.<br>
As screen size becomes smaller, second grid item comes down, instead of truncating the text.</li>
</ol>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.0.0-beta.23</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
</tbody>
</table>