<p dir="auto">When creating declaration files (<code class="notranslate">"declaration": true</code> in <code class="notranslate">tsconfig.json</code>) for a component which uses <code class="notranslate">withStyles</code> the typescript compiler complains with :</p>
<blockquote>
<p dir="auto">TS4023:Exported variable 'MyComponent' has or is using name 'StyledComponentProps' from external module "./node_modules/material-ui/index" but cannot be named.</p>
</blockquote>
<p dir="auto">See <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="167507078" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/9944" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/9944/hovercard" href="https://github.com/microsoft/TypeScript/issues/9944">microsoft/TypeScript#9944</a> for more context on the issue</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 Behaviour</h2>
<p dir="auto">Type inference to handle the issue.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The compiler issues and error. A work around is to import <code class="notranslate">StyledComponentProps</code></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import {withStyles} from 'material-ui/styles';

const decorator = withStyles(({ spacing }) =&gt; ({
  root: {
    padding: spacing.unit * 2
  }
}));

const Example = decorator&lt;{}&gt;(({classes}) =&gt; (
  &lt;div&gt;&lt;/div&gt;
));

export default Example;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">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-s1">withStyles</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">const</span> <span class="pl-s1">decorator</span> <span class="pl-c1">=</span> <span class="pl-en">withStyles</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">{</span> spacing <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">root</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">padding</span>: <span class="pl-s1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">*</span> <span class="pl-c1">2</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">const</span> <span class="pl-smi">Example</span> <span class="pl-c1">=</span> <span class="pl-s1">decorator</span><span class="pl-c1">&lt;</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">{</span>classes<span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-kos">&lt;</span><span class="pl-smi">div</span><span class="pl-kos">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">div</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-s1">default</span> <span class="pl-smi">Example</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">and set <code class="notranslate">"declaration": true</code> in <code class="notranslate">tsconfig.json</code></p>
<p dir="auto">To work around add <code class="notranslate">import {StyledComponentProps} from 'material-ui';</code> to the top of the file</p>
<h2 dir="auto">Context</h2>
<p dir="auto">I am creating a node package of shared MUI components for internal use and exporting them (hence using declaration files)</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-17</td>
</tr>
<tr>
<td>Typescript</td>
<td>2.4.2</td>
</tr>
</tbody>
</table>
<p dir="auto">I have inherited this React/typescript/material-ui project from a more experienced developer.</p>
<p dir="auto">My problem started when I was trying to solve another problem - importing DropDownMenu from material-ui, with my inline linter telling me that it could not be found.</p>
<p dir="auto">I then changed the version of <code class="notranslate">material-ui": "^1.0.0-beta.6"</code> to beta.10 in package.json. I also did an npm install of @types/material-ui and this seemed to resolve the error in the editor.</p>
<p dir="auto">But when I reloaded the project with npm start, I got a message in the terminal saying that the project would not compile due to:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="These modules were not found:

* material-ui/styles/theme in ./lib/styles/context.js
* material-ui/styles/mixins in ./config/theme.js
* material-ui/styles/palette in ./config/theme.js
* material-ui/styles/breakpoints in ./config/theme.js
* material-ui/styles/typography in ./config/theme.js"><pre class="notranslate"><code class="notranslate">These modules were not found:

* material-ui/styles/theme in ./lib/styles/context.js
* material-ui/styles/mixins in ./config/theme.js
* material-ui/styles/palette in ./config/theme.js
* material-ui/styles/breakpoints in ./config/theme.js
* material-ui/styles/typography in ./config/theme.js
</code></pre></div>
<p dir="auto">I have subsequently uninstalled and reinstalled material-ui several times, experimenting with the latest stable release and the pre-release beta versions. Nothing seems to work.</p>
<p dir="auto">I have settled on these relevant node modules in the package.json:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;@material/theme&quot;: &quot;^0.3.0&quot;,
&quot;@types/material-ui&quot;: &quot;^0.18.0&quot;,
&quot;material&quot;: &quot;^0.2.0&quot;,
&quot;material-ui&quot;: &quot;^1.0.0-beta.10&quot;,
&quot;material-ui-icons&quot;: &quot;^1.0.0-beta.10&quot;,"><pre class="notranslate"><code class="notranslate">"@material/theme": "^0.3.0",
"@types/material-ui": "^0.18.0",
"material": "^0.2.0",
"material-ui": "^1.0.0-beta.10",
"material-ui-icons": "^1.0.0-beta.10",
</code></pre></div>
<p dir="auto">Your help would be much appreciated as I have read many github issue threads for material-ui stack overflow questions and nothing seems to help. I have also tried to roll back to previous commits and still getting the same error. This is obviously a pretty major problem if I cannot run and compile the project, thanks!</p>
<ul dir="auto">
<li>[ x] 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>
<p dir="auto">Will provide a live reproducible link on codesandbox.io if not sufficient information has been provided here.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">Just trying to run and compile the project.</p>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">Mac / Node</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>React</td>
<td>"^15.6.1"</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>