<p dir="auto">When I change the transitions in the default variables (like: <a href="https://material-ui-1dab0.firebaseapp.com/customization/themes/#the-other-variables" rel="nofollow">https://material-ui-1dab0.firebaseapp.com/customization/themes/#the-other-variables</a>), the app throws me the following error:<br>
<code class="notranslate">TypeError: theme.transitions.create is not a function</code></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">The framework should use <strong>MY</strong> default transitions that I put on the createMuiTheme function.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The app throws me the following error:<br>
<code class="notranslate">TypeError: theme.transitions.create is not a function</code></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const materialTheme = createMuiTheme({
  transitions: {
    easing: {
      easeInOut: 'cubic-bezier(0.6, 0, 0.2, 1)',
      easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
      easeIn: 'cubic-bezier(0.6, 0, 1, 1)',
      sharp: 'cubic-bezier(0.6, 0, 0.6, 1)'
    },
    duration: {
      shortest: 150,
      shorter: 200,
      short: 250,
      standard: 300,
      complex: 375,
      enteringScreen: 225,
      leavingScreen: 195
    }
  }
});

&lt;MuiThemeProvider theme={materialTheme}&gt;
  &lt;Button raised color=&quot;accent&quot;&gt;
    Mui Button
  &lt;/Button&gt;
&lt;/MuiThemeProvider&gt;"><pre class="notranslate"><code class="notranslate">const materialTheme = createMuiTheme({
  transitions: {
    easing: {
      easeInOut: 'cubic-bezier(0.6, 0, 0.2, 1)',
      easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
      easeIn: 'cubic-bezier(0.6, 0, 1, 1)',
      sharp: 'cubic-bezier(0.6, 0, 0.6, 1)'
    },
    duration: {
      shortest: 150,
      shorter: 200,
      short: 250,
      standard: 300,
      complex: 375,
      enteringScreen: 225,
      leavingScreen: 195
    }
  }
});

&lt;MuiThemeProvider theme={materialTheme}&gt;
  &lt;Button raised color="accent"&gt;
    Mui Button
  &lt;/Button&gt;
&lt;/MuiThemeProvider&gt;
</code></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">The application doesn't compile.</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>1.0.0-beta.9</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
</tbody>
</table>
<h2 dir="auto">Summary</h2>
<p dir="auto">There's a similar issue in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="119258658" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/2302" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/2302/hovercard" href="https://github.com/mui/material-ui/issues/2302">#2302</a>.<br>
Currently, this library did not provide TextFieldBox yet. Therefore I wanted to know if the team will implement it or not. The specification can be found <a href="https://material.io/guidelines/components/text-fields.html#text-fields-field-variations" rel="nofollow">here</a>.<br>
It's appearance would look something like this :<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/23183656/32844112-83e2a728-ca5c-11e7-8ac7-71331f81c9e2.png"><img src="https://user-images.githubusercontent.com/23183656/32844112-83e2a728-ca5c-11e7-8ac7-71331f81c9e2.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Moreover, this design is also widely adopted in the latest Google Calendar App :<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/23183656/32844161-a6bf369e-ca5c-11e7-980a-ce9aed7b34e8.png"><img src="https://user-images.githubusercontent.com/23183656/32844161-a6bf369e-ca5c-11e7-980a-ce9aed7b34e8.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Conclusion</h2>
<p dir="auto">I hope that this component will be implemented soon, as I personally felt that it has a better UX compared to the singe-line text field.</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>