Как получить метку в текстовом поле material-ui справа?

Question

Я использую material-ui и typescript для своего реактивного проекта (макет RTL), и я не знаю, как получить метку текстового поля справа?

Answer 1

Вам нужно jss-rtl для поддержки RTL для CSS. Эта библиотека предоставляет Provider для поддержки rtl в любой библиотеке.

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;

Тогда в вашем основном приложении используйте этого провайдера.

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

Рабочая демоверсия здесь