<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 drawer component should apply the right border depending on which side is anchored when it is docked i.e. <code class="notranslate">permanent</code> or <code class="notranslate">persistent</code>.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The border is always applied to the right side of the drawer even when it is not anchored left.</p>
<p dir="auto">See picture, and the CSS rules applied:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/6626225/30772056-b80ce57c-a054-11e7-9389-89e4419b88a7.png"><img width="1024" alt="screen shot 2017-09-23 at 11 40 49" src="https://user-images.githubusercontent.com/6626225/30772056-b80ce57c-a054-11e7-9389-89e4419b88a7.png" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Use the following drawer:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Drawer type=&quot;permanent&quot; anchored=&quot;right&quot;&gt;&lt;div&gt;Hello, World!&lt;/div&gt;&lt;/Drawer"><pre class="notranslate"><code class="notranslate">&lt;Drawer type="permanent" anchored="right"&gt;&lt;div&gt;Hello, World!&lt;/div&gt;&lt;/Drawer
</code></pre></div>
<ol start="2" dir="auto">
<li>Check CSS rules applied</li>
</ol>
<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-beta11</td>
</tr>
<tr>
<td>React</td>
<td>15.6.2</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td>Mac OS</td>
</tr>
</tbody>
</table>
<p dir="auto">Server side rendering won't work in production because of these lines ( src/utils/styles.js )</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if (process.env.NODE_ENV !== 'production') {
  warning(!style.didFlip, `You're calling ensureDirection() on the same style
    object twice.`);

  style = ImmutabilityHelper.merge({
    didFlip: 'true',
  }, style);
}"><pre class="notranslate"><code class="notranslate">if (process.env.NODE_ENV !== 'production') {
  warning(!style.didFlip, `You're calling ensureDirection() on the same style
    object twice.`);

  style = ImmutabilityHelper.merge({
    didFlip: 'true',
  }, style);
}
</code></pre></div>
<p dir="auto">Is there a reason why didFlip should be different depending on NODE_ENV ?</p>