Input component doen't support RTL direction

[ali-golden-programmer]

When I use RTL languages such as Persian or Arabic for Input labels, the Input style doesn't support it.

[mahmudipur]

I fixed this issue by adding this theme customization object: https://www.material-tailwind.com/docs/react/input#input-theme-customization

by managing ::before and ::after like this:

before: {
              content: "before:content[' ']",
              display: "before:block",
              boxSizing: "before:box-border",
              width: "before:w-2.5",
              height: "before:h-1.5",
              mt: "before:mt-[6.5px]",
              mr: "ltr:before:mr-1 rtl:before:ml-1",
              borderColor: "peer-placeholder-shown:before:border-transparent",
              borderRadius: "ltr:before:rounded-tl-md rtl:before:rounded-tr-md",
              floated: {
                bt: "before:border-t peer-focus:before:border-t-2",
                bl: "ltr:before:border-l rtl:before:border-r ltr:peer-focus:before:border-l-2 rtl:peer-focus:before:border-r-2",
              },
              pointerEvents: "before:pointer-events-none",
              transition: "before:transition-all",
              disabled: "peer-disabled:before:border-transparent",
            },
            after: {
              content: "after:content[' ']",
              display: "after:block",
              flexGrow: "after:flex-grow",
              boxSizing: "after:box-border",
              width: "after:w-2.5",
              height: "after:h-1.5",
              mt: "after:mt-[6.5px]",
              ml: "ltr:after:ml-1 rtl:after:mr-1",
              borderColor: "peer-placeholder-shown:after:border-transparent",
              borderRadius: "ltr:after:rounded-tr-md rtl:after:rounded-tl-md",
              floated: {
                bt: "after:border-t peer-focus:after:border-t-2",
                br: "ltr:after:border-r rtl:after:border-l ltr:peer-focus:after:border-r-2 rtl:peer-focus:after:border-l-2",
              },
              pointerEvents: "after:pointer-events-none",
              transition: "after:transition-all",
              disabled: "peer-disabled:after:border-transparent",
            },

I just added rtl and ltr and it's fixed hope it helps 🙏🏼

[mahmudipur]

@mahmudipur does this apply to select component? and also would you mind correct me where to put these styles?

yes it does, it's working on all elements.

first of all here you can find the documentation about the Theming.

if it's not clear, follow these steps below:

if you are using material-tailwind then you should have something like this in your root component:

ReactDOM.createRoot(document.getElementById("root")!).render(
   ...
      <ThemeProvider value={theme}>
           ....
      </ThemeProvider>
    ...
);

ThemeProvider receives a value prop that you can pass the theme customization object like this:

import menu from "./menu";
import button from "./button";
import checkbox from "./checkbox";
import input from "./input-new";
import select from "./select-new";
import accordion from "./accordion";
import textarea from "./textarea";
import radio from "./radio";

const theme = {
  menu,
  button,
  checkbox,
  input,
  select,
  accordion,
  textarea,
  radio
};
export default theme;

in order to find the style object for each element you want you have 2 options:

1 - almost every component in the documentation have a section containing it's full theme customization object. check here for select component

2 - if there is not a theme customization object in the documentation you can visit this page and find whatever you want

hope it helps, and feel free to ask if something is not clear.

have fun ...