<p dir="auto">When using a RTL language, the label text seems to still be left aligned.</p>
<br>


<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. This is also apparently NOT related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="271403317" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/9007" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/9007/hovercard?comment_id=347857227&amp;comment_type=issue_comment" href="https://github.com/mui/material-ui/pull/9007#issuecomment-347857227">#9007 (comment)</a>. cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/alitaheri/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/alitaheri">@alitaheri</a> who might know more about this!</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Label text should be right aligned when <code class="notranslate">dir="rtl"</code></p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Label text is <em>always</em> left aligned:</p>
<table role="table">
<thead>
<tr>
<th><code class="notranslate">dir="ltr"</code></th>
<th><code class="notranslate">dir="rtl"</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/293004/33380577-3dfa0de6-d524-11e7-8ce9-9384807da21c.png"><img width="475" alt="screen shot 2017-11-29 at 4 41 34 pm" src="https://user-images.githubusercontent.com/293004/33380577-3dfa0de6-d524-11e7-8ce9-9384807da21c.png" style="max-width: 100%;"></a></td>
<td><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/293004/33380098-a515b2f2-d522-11e7-82ae-a71ea53d25bb.png"><img width="452" alt="screen shot 2017-11-29 at 3 03 04 pm" src="https://user-images.githubusercontent.com/293004/33380098-a515b2f2-d522-11e7-82ae-a71ea53d25bb.png" style="max-width: 100%;"></a></td>
</tr>
</tbody>
</table>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">Here is a minimal demo: <a href="https://942ywwnk4w.codesandbox.io/" rel="nofollow">https://942ywwnk4w.codesandbox.io/</a></p>
<h2 dir="auto">Context</h2>
    
<p dir="auto">My labels are showing on misaligned, as per the screenshot above. </p><details><p dir="auto"></p>
 <summary>Inspecting the styles shows the text is `transform`ed to `top left` instead of `top right`</summary>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".MuiInputLabel-formControl-188 {
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(0, 23px) scale(1);
}

.MuiInputLabel-root-187 {
    transform-origin: top left;
}"><pre class="notranslate">.<span class="pl-c1">MuiInputLabel-formControl-188</span> {
    <span class="pl-c1">top</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
    <span class="pl-c1">left</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
    <span class="pl-c1">position</span><span class="pl-kos">:</span> absolute;
    <span class="pl-c1">transform</span><span class="pl-kos">:</span> <span class="pl-en">translate</span>(<span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">23<span class="pl-smi">px</span></span>) <span class="pl-en">scale</span>(<span class="pl-c1">1</span>);
}

.<span class="pl-c1">MuiInputLabel-root-187</span> {
    <span class="pl-c1">transform-origin</span><span class="pl-kos">:</span> top left;
}</pre></div>
</details>
<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>beta.22</td>
</tr>
<tr>
<td>React</td>
<td>16.1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
<p dir="auto">When I use <code class="notranslate">TextField</code> I have to add additional <code class="notranslate">InputProps</code> to make it actually full width as required.<br>
I discovered it when I added a "display: block" to TextField's style.</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>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I would like to use <code class="notranslate">TextField</code> like so:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;TextField
    style={{display: 'block'}}
    label=&quot;Some label&quot;
    fullWidth
    value={value}
    onChange={onValueChange}
/&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-smi">TextField</span><span class="pl-kos"></span>
    <span class="pl-s1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">display</span>: <span class="pl-s">'block'</span><span class="pl-kos">}</span><span class="pl-kos">}</span>
    <span class="pl-s1">label</span><span class="pl-c1">=</span><span class="pl-s">"Some label"</span>
    <span class="pl-s1">fullWidth</span>
    <span class="pl-s1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span>value<span class="pl-kos">}</span>
    <span class="pl-s1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span>onValueChange<span class="pl-kos">}</span>
<span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">and I would expect the internal <code class="notranslate">Input</code> component in the tree to have <code class="notranslate">fullWidth: true</code>, but this is not the case (tested with react dev tools - If I toogle this prop on <code class="notranslate">Input</code> component under <code class="notranslate">TextField</code> it is properly rendered).</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">I have to use the component like so:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;TextField
    style={{display: 'block'}}
    label=&quot;Some label&quot;
    fullWidth
    InputProps={{ fullWidth: true }}
    value={value}
    onChange={onValueChange}
/&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-smi">TextField</span><span class="pl-kos"></span>
    <span class="pl-s1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">display</span>: <span class="pl-s">'block'</span><span class="pl-kos">}</span><span class="pl-kos">}</span>
    <span class="pl-s1">label</span><span class="pl-c1">=</span><span class="pl-s">"Some label"</span>
    <span class="pl-s1">fullWidth</span>
    <span class="pl-smi">InputProps</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">fullWidth</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">}</span>
    <span class="pl-s1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span>value<span class="pl-kos">}</span>
    <span class="pl-s1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span>onValueChange<span class="pl-kos">}</span>
<span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">to explicitly set fullWidth on <code class="notranslate">Input</code> component.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">See: <a href="https://codesandbox.io/s/988v6zm95p" rel="nofollow"><img src="https://camo.githubusercontent.com/90808661433696bc57dce8d4ad732307b5cec6270e6b846f114dcd7ee7f9458a/68747470733a2f2f636f646573616e64626f782e696f2f7374617469632f696d672f706c61792d636f646573616e64626f782e737667" alt="Edit 988v6zm95p" data-canonical-src="https://codesandbox.io/static/img/play-codesandbox.svg" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">I needed this <code class="notranslate">display: block</code> for styling purposes and discovered a bug in the process.</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.28</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 63.0.3239.132</td>
</tr>
</tbody>
</table>