【问题标题】:How to get the label in the material-ui text field to the right?怎么把material-ui文本域中的label放到右边?
【发布时间】:2019-10-05 12:19:21
【问题描述】:

我在我的反应项目(rtl 布局)中使用material-ui 和typescript,但我不知道如何将文本字段的标签放在右侧?

【问题讨论】:

  • 关注link
  • @tarzenchugh 占位符在右边,但不是标签!
  • 请添加代码以明确预期重现问题。
  • 上图很清楚,我想把文本字段的标签放在右边
  • Banafshe Alipour,您找到将标签移动到正确位置的解决方案了吗?

标签: reactjs typescript material-ui textfield


【解决方案1】:

你需要jss-rtl 来支持 rtl for 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")
);

工作演示here

【讨论】:

  • 谢谢,但我在这一行遇到错误:const jss = create({ plugins: [...jssPreset().plugins, rtl() ] }); 和 error: Argument of type '{ plugins: (JSSPlugin | { onProcessStyle(style: any,规则:任何,工作表:任何):任何;})[]; }' 不可分配给类型为“Partial”的参数。属性“插件”的类型不兼容。
  • 对我来说它工作正常 --> 你看到codesanbox link。你安装了react-jss 和jss-rtl 库吗?
  • 是的,但仍然无法正常工作。我发现它对您有用
  • 顺便说一句,我正在使用 Typescript
猜你喜欢
  • 2017-11-13
  • 2019-04-05
  • 2021-08-10
  • 2020-04-01
  • 2012-01-07
  • 2018-03-05
  • 1970-01-01
  • 2015-09-14
  • 1970-01-01
相关资源
最近更新 更多