时间戳

首页 > 解决方案 > 将材质ui文本字段标签放在Border的右上角而不是左边

reactjs - 将材质ui文本字段标签放在Border的右上角而不是左边

问题描述

嗨，我正在尝试为阿拉伯语文本制作一个文本文件，因为阿拉伯语文本从右到左放置在那里，因为我也想将标签放在右上角但无法做到这一点我正在应用的样式是

const useStyles = makeStyles((theme) => ({
    formControl: {
        margin: theme.spacing(3),
    },
    formControl: {
        position: 'absolute',
        left: 0,
        top: 0,
        transform: 'translate(0, 24px) scale(1)',
      },
    labelRoot: {
        right: "20px",
      },
      shrink: {
        transformOrigin: "top right",
        transform:"translateX(50px)"
    }
}));

我的文本字段是

<TextField
                    style={{ direction: "rtl" }}
                    InputLabelProps={{
                        classes: { root: classes.labelRoot, shrink: classes.shrink }
                      }}
                    label={t("Ad Title (eg: Toyota Camry 2018 for Sale)")}
                    variant="outlined"
                    fullWidth
                    onChange={ev => setData({
                        ...data,
                        title: ev.target.value
                    })}
                    value={data ? data.title : ''}
                    required
                />

标签： reactjsmaterial-ui

解决方案

我认为你需dir="rtl"要这样做body。

根据 MUI文档，您可以执行此操作。

  1. HTML 确保在 body 上设置了 dir 属性，否则原生组件会损坏：
    <body dir="rtl"></body>

作为上述的替代方案，您还可以将应用程序包装在具有 dir 属性的元素中：

function App() {
  return (
    <div dir="rtl">
      <MyComponent />
    </div>
  );
}

这有助于创建组件以在实时应用程序中切换语言设置。

  1. 主题在您的自定义主题中设置方向：
const theme = createTheme({
  direction: 'rtl',
});

如果您查看MUI 文档，它特别提到了方向变化，并且 mui 文档主题也实现了类似的体验。

除此之外，

推荐阅读