Label Text left aligned when dir=rtl

When using a RTL language, the label text seems to still be left aligned.

• I have searched the issues of this repository and believe that this is not a duplicate. This is also apparently NOT related to https://github.com/mui-org/material-ui/pull/9007#issuecomment-347857227. cc @alitaheri who might know more about this!

Expected Behavior

Label text should be right aligned when dir="rtl"

Current Behavior

Label text is always left aligned:

dir="ltr"	dir="rtl"

Steps to Reproduce (for bugs)

Here is a minimal demo: https://942ywwnk4w.codesandbox.io/

Context

My labels are showing on misaligned, as per the screenshot above.

Inspecting the styles shows the text is `transform`ed to `top left` instead of `top right`

.MuiInputLabel-formControl-188 {
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(0, 23px) scale(1);
}

.MuiInputLabel-root-187 {
    transform-origin: top left;
}

Your Environment

Tech	Version
Material-UI	beta.22
React	16.1
browser	Chrome

[mbrevda]

this has nothing to do with the theme.

Indeed. I found the instructions confusing. Thanks!

[mbrevda]

I was thinking of a RTL component that would alleviate a lot of the pain. I’m not familiar enough with either jss or this project, but I put something together for myself. It seems a component (if doable/scalable) would be a lot simpler?

On Wed, Nov 29, 2017, 9:49 PM Matt Brookes [e-mail] wrote:

@mbrevda https://github.com/mbrevda Since you’ve been through the exercise, please could you submit a small PR to clarify the docs in the area you found confusing? It would help us and everyone else. 👍

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mui-org/material-ui/issues/9332#issuecomment-347975420, or mute the thread https://github.com/notifications/unsubscribe-auth/AAR4jBj6hyhdSyYlColNcUjDnkuhxDmNks5s7bVVgaJpZM4QvE8o .