如何让右边的material-ui文本域中的标签？

Question

我正在为我的 React 项目（rtl 布局）使用 material-ui 和 typescript，但我不知道如何将文本字段的标签放在右边？

Answer 1

您需要 jss-rtl 来支持 css 的 rtl。该库提供 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")
);

工作演示here

如何让右边的material-ui文本域中的标签？

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

textfield

typescript

reactjs

material-ui