CODEWITHSUNDEEP
reactjstypescriptmaterial-uitextfield
Banafshe Alipour
Banafshe Alipour

Reputation: 1110

How to get the label in the material-ui text field to the right?

I'm using material-ui and typescript for my react project (rtl layout) and i don't know how to get the label of text field to the right?

enter image description here

Upvotes: 5

Views: 4288

Answers (2)

דור בלמס
דור בלמס

Reputation: 31

Found a better way without external libraries.

export const theme = createTheme({
components: {
   MuiInputLabel: {
      styleOverrides: {
          root: {
            left: 'inherit',
            right: '1.75rem',
            transformOrigin: 'right',
       },
   },
},
   MuiOutlinedInput: {
      styleOverrides: {
          notchedOutline: {
            textAlign: 'right',
          },
      },
   },
},
})

Upvotes: 3

tarzen chugh
tarzen chugh

Reputation: 11247

You need jss-rtl to support rtl for css. This library provides its Provider to support rtl in any library.

import React from "react";
import { create } from "jss";
import rtl from "jss-rtl";
import JssProvider from "react-jss/lib/JssProvider";
import { createGenerateClassName, jssPreset } from "@material-ui/core/styles";

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();

function RTL(props) {
  return (
    <JssProvider jss={jss} generateClassName={generateClassName}>
      {props.children}
    </JssProvider>
  );
}

export default RTL;

Then in your main app use this provider.

ReactDOM.render(
  <RTL>
    <Demo />
  </RTL>,
  document.querySelector("#root")
);

Working demo here

Upvotes: 2

Related Questions