<h3 dir="auto">Problem description</h3>
<p dir="auto">Example: <code class="notranslate">Hidden</code> API docs <code class="notranslate">import type {HiddenProps} from './types'</code>.  This is done to prevent a cyclic dependency problem, as the <code class="notranslate">HiddenProps</code> are imported by three (to be four) files:</p>
<ol dir="auto">
<li><code class="notranslate">Hidden</code></li>
<li><code class="notranslate">HiddenJs</code></li>
<li><code class="notranslate">HiddenCss</code> (TBD)</li>
<li><code class="notranslate">Grid</code> (tight integration with <code class="notranslate">Hidden</code>)</li>
</ol>
<p dir="auto">I am very strongly against duplicating props just so we have documentation. In this case, we have two public components so we would probably have three copies of a reasonably extensive set of properties.</p>
<p dir="auto">This is not the lone case, as our responsive components reference <code class="notranslate">type Breakpoint</code> as well, though this one seems easier as it is a bit simpler.</p>
<p dir="auto">I <a href="https://github.com/reactjs/react-docgen/issues/180" data-hovercard-type="issue" data-hovercard-url="/reactjs/react-docgen/issues/180/hovercard">raised an issue and learned that react-docgen doesn't resolve imported types</a>.  I have been thinking about the solution.  Duplication is a last resort and I don't think we are there yet.</p>
<p dir="auto">Note that this is <a href="https://github.com/reactjs/react-docgen/issues/33" data-hovercard-type="issue" data-hovercard-url="/reactjs/react-docgen/issues/33/hovercard"><em>not specific to use of flow</em>, it is also a problem importing reusable prop-types</a>.</p>
<p dir="auto">I am open to ideas on solutions.  It is something that must be addressed before <code class="notranslate">next</code> is generally available.</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/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">I'm trying to differentiate the icon class style of a switch between checked and unchecked, but it doesn't seem to work</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const styles = {
  icon: {
    borderWidth: 0,
    borderColor: b3,
    borderStyle: 'solid'
  },
  checked: {
    '&amp; + $icon': {
      borderWidth: 1,
      borderColor: b4,
      borderStyle: 'solid'
    },
    '&amp; &gt; $icon': {
      borderWidth: 1,
      borderColor: b4,
      borderStyle: 'solid'
    }
  }"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">styles</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">icon</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">borderWidth</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
    <span class="pl-c1">borderColor</span>: <span class="pl-s1">b3</span><span class="pl-kos">,</span>
    <span class="pl-c1">borderStyle</span>: <span class="pl-s">'solid'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">checked</span>: <span class="pl-kos">{</span>
    <span class="pl-s">'&amp; + $icon'</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">borderWidth</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
      <span class="pl-c1">borderColor</span>: <span class="pl-s1">b4</span><span class="pl-kos">,</span>
      <span class="pl-c1">borderStyle</span>: <span class="pl-s">'solid'</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-s">'&amp; &gt; $icon'</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">borderWidth</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
      <span class="pl-c1">borderColor</span>: <span class="pl-s1">b4</span><span class="pl-kos">,</span>
      <span class="pl-c1">borderStyle</span>: <span class="pl-s">'solid'</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Context</h2>

<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.27</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
</tbody>
</table>