<p dir="auto">Should Typography extended while providing extra properties in theme &gt; typography</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">When provide extra property in createMuiTheme &gt; typography, it should be able to access in <code class="notranslate">type</code> of <code class="notranslate">Typography</code></p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Not supported</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">em... consider this as a feature request. we should be able to do something like following</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';

function updateTheme() {
  return createMuiTheme({
    typography: {
      content: {
        fontFamily:'Roboto Condensed',
        fontSize: 14
      }
    }
  });
}

function TypographyTheme() {
  return (
    &lt;MuiThemeProvider theme={updateTheme}&gt;
      &lt;div&gt;
        &lt;Typography type=&quot;title&quot;&gt;{'this is title'}&lt;/Typography&gt;
        &lt;Typography type=&quot;content&quot;&gt;{'this is the content'}&lt;/Typography&gt;
      &lt;/div&gt;
    &lt;/MuiThemeProvider&gt;
  );
}

export default TypographyTheme;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">MuiThemeProvider</span><span class="pl-kos">,</span> <span class="pl-s1">createMuiTheme</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/styles'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Typography</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/Typography'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Button</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/Button'</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">updateTheme</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">createMuiTheme</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">typography</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">content</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">fontFamily</span>:<span class="pl-s">'Roboto Condensed'</span><span class="pl-kos">,</span>
        <span class="pl-c1">fontSize</span>: <span class="pl-c1">14</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-v">TypographyTheme</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">MuiThemeProvider</span> <span class="pl-c1">theme</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">updateTheme</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Typography</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"title"</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">'this is title'</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Typography</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Typography</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"content"</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">'this is the content'</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Typography</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">MuiThemeProvider</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">TypographyTheme</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Context</h2>
    
<p dir="auto">usually people would use <code class="notranslate">Roboto</code> along with <code class="notranslate">Roboto Condensed</code> or <code class="notranslate">Noto</code> to create a Title &gt; Content pair</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.13</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
<tr>
<td>browser</td>
<td>n/a</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">Enhancement request:</p>
<p dir="auto">The expand/collapse behavior of <a href="http://www.material-ui.com/#/components/list" rel="nofollow">Nested Lists</a> should animate open/closed.</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?utf8=%E2%9C%93&amp;q=is%3Aissue%20is%3Aopen%20animate%20nested%20list">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Lists should animate when they expand / collapse.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Lists currently snap to the state, without any visual explanation of what happened. This is comprehendible to most user, but gets disorienting if lists are large.</p>