<p dir="auto">The icons from material-ui-icon have no TS typings, so there's no way to import them without getting a (Could not find a declaration module for module FOOBAR) warning.<br>
The only workaround is to use an old const AddIcon = require('material-ui-icons/Add').default;</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">Icons from the package should have a typing so TS doesn't generate a warning when importing them.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Importing them generates a TS warning, having to resort to require</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto"><code class="notranslate">import AddIcon from 'material-ui-icons/Add';</code></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-beta9</td>
</tr>
<tr>
<td>React</td>
<td>15</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 61</td>
</tr>
<tr>
<td>TS</td>
<td>2.5.2 on strict mode</td>
</tr>
</tbody>
</table>
<p dir="auto">I am trying to change the default color for the palette for example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { red, grey } from 'material-ui/colors'

const theme = createMyTheme({
  palette: {
    primary: red['300'],
    secondary: grey,
  },
  status: {
    danger: 'orange',
  },
});"><pre class="notranslate"><code class="notranslate">import { red, grey } from 'material-ui/colors'

const theme = createMyTheme({
  palette: {
    primary: red['300'],
    secondary: grey,
  },
  status: {
    danger: 'orange',
  },
});
</code></pre></div>
<p dir="auto">notice the <code class="notranslate">red['300']</code></p>
<p dir="auto">I also get a warning on the console for this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Material-UI: primary color is missing the following hues: 50,100,200,300,400,500,600,700,800,900,A100,A200,A400,A700,contrastDefaultColor
[1] See the default colors, indigo, or pink, as exported from material-ui/colors."><pre class="notranslate"><code class="notranslate">Warning: Material-UI: primary color is missing the following hues: 50,100,200,300,400,500,600,700,800,900,A100,A200,A400,A700,contrastDefaultColor
[1] See the default colors, indigo, or pink, as exported from material-ui/colors.
</code></pre></div>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> 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.<br>
I see that in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="240365404" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/7332" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/7332/hovercard" href="https://github.com/mui/material-ui/issues/7332">#7332</a> the <code class="notranslate">palette</code> a collection of <code class="notranslate">hue</code> but if I do the following:</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const theme = createMyTheme({
  primary: red['100'],
  palette: {
    secondary: grey,
  },
  status: {
    danger: 'orange',
  },
});"><pre class="notranslate"><code class="notranslate">const theme = createMyTheme({
  primary: red['100'],
  palette: {
    secondary: grey,
  },
  status: {
    danger: 'orange',
  },
});
</code></pre></div>
<p dir="auto">The color defaults to original theme color.</p>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">I expect it to change the color to the different hue</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">when I have it like <code class="notranslate">red['400']</code> or <code class="notranslate">red[400]</code> I get <code class="notranslate">color is undefined</code></p>
<p dir="auto">When I leave it as <code class="notranslate">red</code> it works perfect.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Using <a href="https://github.com/zeit/next.js/">zeit's nextjs</a> with typescript</li>
<li>Install material ui following the <a href="https://material-ui-next.com/guides/typescript/#customization-of-theme" rel="nofollow">typescript tutorial</a></li>
<li>Try adding <code class="notranslate">primary: red['300']</code> to your color palette</li>
<li>??</li>
</ol>
<h2 dir="auto">Context</h2>

<p dir="auto">I see that in <a href="https://material-ui-next.com/customization/themes/#the-other-variables" rel="nofollow">theme variables guide</a> you could add:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    &quot;primary&quot;: {
      &quot;50&quot;: &quot;#e3f2fd&quot;,
      &quot;100&quot;: &quot;#bbdefb&quot;,
      &quot;200&quot;: &quot;#90caf9&quot;,
      &quot;300&quot;: &quot;#64b5f6&quot;,
      &quot;400&quot;: &quot;#42a5f5&quot;,
      &quot;500&quot;: &quot;#2196f3&quot;,
      &quot;600&quot;: &quot;#1e88e5&quot;,
      &quot;700&quot;: &quot;#1976d2&quot;,
      &quot;800&quot;: &quot;#1565c0&quot;,
      &quot;900&quot;: &quot;#0d47a1&quot;,
      &quot;A100&quot;: &quot;#82b1ff&quot;,
      &quot;A200&quot;: &quot;#448aff&quot;,
      &quot;A400&quot;: &quot;#2979ff&quot;,
      &quot;A700&quot;: &quot;#2962ff&quot;,
      &quot;contrastDefaultColor&quot;: &quot;light&quot;
    }"><pre class="notranslate"><code class="notranslate">    "primary": {
      "50": "#e3f2fd",
      "100": "#bbdefb",
      "200": "#90caf9",
      "300": "#64b5f6",
      "400": "#42a5f5",
      "500": "#2196f3",
      "600": "#1e88e5",
      "700": "#1976d2",
      "800": "#1565c0",
      "900": "#0d47a1",
      "A100": "#82b1ff",
      "A200": "#448aff",
      "A400": "#2979ff",
      "A700": "#2962ff",
      "contrastDefaultColor": "light"
    }
</code></pre></div>
<p dir="auto">And it works, is there a tool to create such variables by selecting, for example, the <code class="notranslate">red</code> color?</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.24</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>firefox, chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>